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