jQuery animate problem

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"&gt; 
<em>Description</em> 
<img src="thumb.jpg"/> 
</a>
<a href="http://www.website.com"&gt; 
<em>Description</em> 
<img src="thumb.jpg"/> 
</a> 
<a href="http://www.website.com"&gt; 
<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

Answer 2

Not a direct answer to your specific issue, but I recommend you look into the JQuery UI. It has animation effects similar to what you've attempted here.