JQuery оживить проблему

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. Он имеет анимационные эффекты, аналогичные тем, которые вы пытались здесь.