div의 애니메이션 요소를 애니메이션화합니다.

Question

div # image1의 이미지를 애니메이션화하려고합니다. 다음 마크 업을 사용하고 있습니다.

<div id="images"> 
    <img src="Images/Blue%20hills.jpg" width="100px" height="100px" /> 
    <img src="Images/Sunset.jpg" width="100px" height="100px" style="display:none;"/> 
    <img src="Images/Sunset.jpg" width="100px" height="100px" style="display:none;"/> 
    <img src="Images/Winter.jpg"width="100px" height="100px" style="display:none;"/> 
</div> 
<ol id="paging"> 
    <li><a href="javascript:void(0);">1</a></li> 
    <li><a href="javascript:void(0);">2</a></li> 
    <li><a href="javascript:void(0);">3</a></li> 
    <li><a href="javascript:void(0);">4</a></li> 
</ol> 

와 나는

$('#paging ol li a').bind('click', function() { 
      var text = $(this).text(); 

      $('#images img').get(text).animate({ width: '200px', height: '200px', opacity: 0 }); 

에 의해 애니메이션을하려고하지만 내가이 작업을 수행하는 방법을

$("#images img").get(parseInt(text) - 1).animate is not a function 
     }); 

예외

을 던지고있다. 도와주세요.

Answer 1

. 만 사용 하나 개 즉 팔자 또는 #paging 및 사용 n 번째 자식 선택기`ol` 선택에

$('#paging li a').bind('click', function() { 
    var text = $(this).text(); 
    $('#images img:nth-child(' + text + ')').animate({ width: '200px', height: '200px', opacity: 0 }); 
}); 

Answer 2

.get() 대신 .eq()을 사용하면 DOM 요소 대신 jQuery 객체를 사용할 수 있습니다.

$('#images img').eq(text).animate({ width: '200px', height: '200px', opacity: 0 }); 

한 두 번 이상 발생할 경우 이미지 캐싱을 고려할 수 있습니다. 핸들러 외부

: 핸들러 내부 그리고

var imgs = $('#images img'); 

: 당신은 jQuery를 선택에 팔자 ID와 OL를 사용하는

imgs.eq(text).animate({...