jQuery fadeIn fadeOut更改图像src



我正在制作一个图像映射,并试图通过更改图像源来使图像依次淡入和淡出(这很重要)。下面代码的问题是,它只使用最后一个源图像,并将其淡入淡出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')
});

fadeIn和fadeOut具有回调功能,如:

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

//不要使用for循环

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

您应该执行以下操作:

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

重要提示:尽量避免调用具有相同id的元素,id属性应该是唯一的。

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

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

我在互联网上的某个地方发现了这个,它成功了:

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

newPhoto = 'Image HTML';

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

}

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

最新更新