JQuery анимации проблемы

Question

У меня есть этот JQuery код, который скользит в «эм» бирку, при наведении курсора мыши, и вниз по размытости:

$(".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); 
    } 
); 

Edit:
если вы хотите что-то действительно эффективное, вы можете захотеть, чтобы избежать JQuery для выбора и просто использовать $(this.childNodes[1]), чтобы выбрать его.
[1] это потому, что пробел является элементом 0

Answer 2

Не прямой ответ на вашу конкретную проблему, но я рекомендую вам ознакомиться с интерфейсом JQuery. Он обладает анимационными эффектами, подобными тем, что вы пытались здесь.