Question

我有这个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>

当我将鼠标移到标签外时，em标签会向下跳几个像素，然后开始滑动。这会产生一种滞后效应。

有没有更好的方法来写这个？

比如使用var来缓存$（this）.find（“em”）？

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

Answer 1

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

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

修改：
如果你想要一些真正有效的东西，你可能想要避免使用jQuery进行选择，只需使用$(this.childNodes[1])来选择它。
[1]是因为空格是元素0

Answer 2

不能直接回答您的具体问题，但我建议您查看JQuery UI。它的动画效果类似于你在这里尝试过的效果。

jQuery动画问题

2 个答案: