jQuery animieren Problem

Question

Ich habe dieses jQuery-Code, der eine "em" Tag up gleiten, auf schweben, und unten auf 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"> 
<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> 

Wenn ich meine Maus außerhalb bewegen das a-tag, das em-tag springt ein paar pixel runter und beginnt dann zu rutschen. Dies erzeugt eine Art Verzögerungseffekt.

Gibt es einen besseren Weg, dies zu schreiben?

Wie ein var mit dem $ (this) .find ("em") cachen?

Irgendwelche Tipps für die Leistung und Code-Stil wäre sehr geschätzt.

Answer 1

versuchen dies mit, ich denke, es ist die Wirkung, die Sie gehen, und es verwendet weichere Übergänge.

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

bearbeiten:
wenn man etwas wirklich effizient wollen, können Sie jQuery für die Auswahl zu vermeiden und nur $(this.childNodes[1]) es auszuwählen verwenden.
[1] ist, weil Leerzeichen ist Element 0

Answer 2

Keine direkte Antwort auf Ihr spezifisches Problem, aber ich empfehle Ihnen, in die JQuery UI zu schauen. Es hat ähnliche Animationseffekte wie hier.