Анимированные дочерние элементы div

Question

Я пытаюсь анимировать изображения внутри div # image1.Я имею следующий markUp.

<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

При использовании идентификатора ола и OL в селекторе JQuery. Используйте только один или ола т.е. #paging и использовать селектор п-й ребенок
Изменить его

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

Answer 2

Используйте .eq() вместо .get(), чтобы он предоставил объект jQuery вместо элемента DOM.

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

Если это произойдет более одного или двух раз, вам может потребоваться кэширование изображений.

Вне обработчика:

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

Затем внутри обработчика:

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