我正在制作一个基本图像滑块(按下一个/上一个按钮,图片也会改变)。我也试图实现一个非常简单的淡入淡出效果;要做到这一点,我有一个for循环,它改变了图像的类,循环通过改变不透明度的类。代码工作正常并按我想要的方式执行,但for循环执行得如此之快,以至于您没有注意到不透明度的变化。我到处都看,人们都提到了setTimeout,但这只会导致函数的延迟启动..我只想减慢我的for循环,这样你就可以在视觉上注意每次迭代。
function nextphoto(){
for(var x = 0; x < 5; x++){
photo.className = fade[x];
}
i++;
if(i>19){
i=0;
}
photo.src = image[i];
for(var y = 4; y >= 0; y--){
photo.className = fade[y];
}
}
答案 0 :(得分:1)
您可能误解了同步代码执行的概念。在将任何内容更新或“呈现”到屏幕之前,所有代码都必须完成运行。所以你的for循环将一直运行直到它完成,然后屏幕将更新,但它当然只有要渲染的图像的最终视图。
你应该触发一个CSS变换,通过javascript动态地向元素添加一个类,或者如果你不顾一切地在代码中执行它,有一些理由不使用CSS,并且不想编写自定义每帧动画系统,或使用一个库,然后在for循环的每次迭代内,激活一个异步函数,该函数将在当前同步for循环代码之外的更晚和更晚的时间更新。
即:
var aThing;
for(var i = 0; i < someNumber; i++){
setTimeout(function(){
aThing.someValue = aThing.someValue * .9;
}, 500 * i);
}
答案 1 :(得分:0)
您应该考虑使用JQuery的animate()函数为不透明度等css值设置动画。更好的是你可以使用CSS动画。
你所做的并不是实现目标的好方法。如果你真的想要那样,你应该使用setInterval或setTimeout。