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

。 のみを使用して1すなわちのオールまたは#pagingと `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 }); 

これが2回以上発生する場合は、画像をキャッシュすることを検討してください。ハンドラ外

：ハンドラ内で次に

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

：あなたはjQueryのセレクタでオールのIDやOLを使用している

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