Question

I have this jQuery code that slide an "em" tag up, on hover, and down on blur:

$(".entries a").hover(   function () {    $(this).find("em").animate( { height:"100%"}, 500 )       },    function () {   $(this).find("em").animate( { height:"0%"}, 500 )   } ); 

html code

<div class="entries"> <a href="http://www.website.com">  <em>Description</em>  <img src="thumb.jpg"/>  </a> <a href="http://www.website.com">  <em>Description</em>  <img src="thumb.jpg"/>  </a>  <a href="http://www.website.com">  <em>Description</em>  <img src="thumb.jpg"/>  </a>  </div> 

When I move my mouse outside the a tag, the em tag jump down a few pixels down and then begin to slide. This creates sort of a lagging effect.

Is there a better way to write this?

Like using a var to cache the $(this).find("em")?

Any tips for performance and code style would be very appreciated.

Answer 1

try using this, I think it is the effect that you’re going for, and it uses smoother transitions.

$('.entries a').hover(   function () {    $(this).find('em').slideDown(500);   },    function () {   $(this).find('em').slideUp(500);   } ); 

Edit:
if you want something really efficient, you may want to avoid jQuery for the selection and just use $(this.childNodes[1]) to select it.
[1] is because whitespace is element 0