Question

我正在制作一张图像地图，并且一直试图通过更改图像源使图像连续淡入淡出（这很重要）。以下代码的问题在于，它仅使用最后一个源图像并将其淡入和淡出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')
});

Answer 1

我可能假设您调用了所有ID为imgHolder的图像，因此每个循环都将所有图像的源代码更改为最后一个。

您应该执行以下操作：

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

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

Answer 2

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

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

//不要使用for循环。

Answer 3

这是你应该使用的代码，在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)
});

可能更合适。真的，由你决定。

Answer 4

我在互联网上的某个地方找到了这个并且它起到了作用：

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



  newPhoto = 'Image HTML';

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

newPhoto = 'Image HTML';

我无法使用任何其他方法。

jQuery fadeIn fadeOut更改图像src

4 个答案: