0

我正在制作图像映射，并且一直在尝试通过更改图像源来使图像连续淡入和淡出（这很重要）。下面代码的问题在于它只使用最后一个源图像并将其淡入淡出 5 次。我当然希望每个图像都淡入和淡出一次。大脑可能很快就会爆炸。知道我做错了什么。如您所知，我是 jQuery 的菜鸟。感谢帮助。

imgArray = Array(
  "img0.png",
  "img1.png",
  "img2.png",
  "img3.png",
  "img4.png"
);

jQuery(document).ready(function() {
  for(i=0; i<5; i++)
     jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow').delay(500).fadeOut('slow')
});
4

4 回答 4

0

这是您应该使用的代码，在fadeIn 上设置一个回调函数，以对fadeOut 进行排队。

jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow', function(){
  $(this).delay(500).fadeOut('slow')
});

但是像

jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow', function(){
   setTimeout(function(){
     $(this).fadeOut('slow')
   },500)
});

可能更合适。取决于你，真的。

于 2012-07-16T05:36:38.980 回答
0

我在互联网上的某个地方找到了这个，它成功了：

for(i = 0; i < 5; i++) {

newPhoto = 'Image HTML';

jQuery("#id").fadeOut('fast').html(newPhoto).stop(true,true).hide().fadeIn();

}

我只是无法让任何其他方法起作用。

于 2013-02-20T19:53:22.003 回答
0

我可能假设您使用 id 调用了所有图像imgHolder所以每个循环都将所有图像的源更改为最后一个。

您应该执行以下操作：

$(document).ready(function() {
   $('#imgHolder').each(function(index) {
     $(this).attr('src',imgArray[index]).fadeIn('slow').delay(500).fadeOut('slow');
   });
});

重要提示：尽量避免使用相同的调用元素id，该id属性应该是唯一的。

于 2012-07-16T04:01:42.793 回答
0

fadeIn 和 fadeOut 具有回调函数，例如：

$("#imgHolder").fadeIn('slow', function(){
    //$(this) -> $("#imgHolder")
    //do something
})

//不要使用for循环。</p>

于 2012-07-16T04:11:24.293 回答