Javascript jQuery动画

我有一个jQuery代码，它可以向上滑动“em”标记，在悬停时滑动，在模糊时向下滑动：

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

html代码

<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>

当我将鼠标移到a标记外时，em标记向下跳几个像素，然后开始滑动。这造成了某种滞后效应

有没有更好的方法写这个

就像使用var缓存

$（this.find（“em”）

---

任何关于性能和代码风格的提示都将非常感谢。

尝试使用它，我认为这是您想要的效果，它使用更平滑的过渡

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

编辑：
如果您想要真正高效的东西，您可能希望避免使用jQuery进行选择，只需使用

$（this.childNodes[1]）

来选择它。

---

[1]

是因为空格是元素0

不是对您的具体问题的直接回答，但我建议您查看JQuery UI。它的动画效果与您在此尝试的效果类似。

谢谢，效果更好。如何在变量中缓存$（this）.find（“em”）并在代码中使用它？您知道它的速度有多快吗？我真的能注意到不同吗？很抱歉再次问这个问题，但我真的很想知道，我如何在变量中缓存$（this）.find（“em”）并在代码中使用它？我看到缓存它的方法并不简单，因为您将单个函数应用于多个元素，您需要一个数组，这需要为每个元素保留一个索引，然后回到原点