jquery - show individual elements independently using each method -
trying show 1 element @ time using each function, not sure how matching item associated first item hover on first "hoverme" shows first showme , on
here have far, think can messy way, not sure if there clean way it.
<p class="hoverme">hover me<span class="showme">show me</span></p> <p class="hoverme">hover me<span class="showme">show me</span></p> <p class="hoverme">hover me<span class="showme">show me</span></p> $('.showme').hide(); $(".hoverme").each(function(){ $(this).hover( function () { $(".showme").fadein(); }, function () { $(".showme").fadeout(); } ); });
the this
keyword reference hovered element inside function, , using context in selector, can select spans inside hovered paragraph.
.hover()
shortcut .on('mouseenter mouseleave'
, , find easier using directly, , fadetoggle()
toggle fading effect.
$('.showme').hide(); $(".hoverme").on('mouseenter mouseleave', function() { $(".showme", this).fadetoggle(); });
edit:
to make sure fading toggle's correctly (which problem), can create own toggle functionality:
$('.showme').hide(); $(".hoverme").on('mouseenter mouseleave', function(e) { $(".showme", this)[e.type=='mouseenter'?'fadein':'fadeout'](); });
Comments
Post a Comment