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

您正在使用jQuery选择器中的ol ID和OL。只使用一个，即#paging和使用nth-child选择器
将其更改为

$('#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({...

div的动画子元素

2 个答案: