jQuery를 문제 애니메이션

나는 아래 흐림이 jQuery를 호버에,에 "EM"태그를 위로 밀어 코드 및 있습니다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>

나는 밖에서 내 마우스를 이동 a 태그, em 태그는 몇 픽셀 아래로 뛰어 내린 다음 슬라이드를 시작합니다. 이렇게하면 일종의 지연 효과가 생깁니다.

더 좋은 방법이 있나요?

$ (this) .find ("em")을 캐시하는 데 var를 사용하는 것과 같은가요?

성능 및 코드 스타일에 대한 정보는 매우 유용 할 것입니다.

출처

2009-03-17 Sindre Sorhus

시도해 보니 효과적이라고 생각합니다. 전환이 원활하게 처리됩니다.

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

편집 : 당신이 정말 효율적으로 무언가를 원하는 경우
, 당신은 선택을 위해 jQuery를 방지하고 그냥 선택 $(this.childNodes[1])를 사용할 수 있습니다.
[1]은 공백이 요소이므로 0

출처

2009-03-17 11:06:39 cobbal

감사합니다. 잘 작동합니다. $ (this) .find ("em")를 var에 캐시하고 코드에서 사용하려면 어떻게해야합니까? –

얼마나 빨랐는지 아십니까? 차이점을 실제로 느낄 수 있습니까? 죄송합니다. 다시 한 번 말씀 드려서 죄송 합니다만, $ (this) .find ("em")를 var에 캐시하고 코드에서 사용하려면 어떻게해야합니까? –

하나의 함수를 여러 요소에 적용하기 때문에 쉽게 볼 수있는 캐시 방법이 없습니다. 배열을 필요로합니다. 각 요소에 대한 인덱스를 유지 한 다음 다시 정사각형으로 유지해야합니다. – cobbal

특정 문제에 대한 직접적인 대답은 아니지만 JQuery UI를 살펴 보시기 바랍니다. 여기에 시도한 것과 비슷한 애니메이션 효과가 있습니다.

출처

2009-03-17 11:07:12 Geoff

jQuery를 문제 애니메이션

답변

관련 문제