我已经构建了一个非常简单的图像淡入淡出图库,它可以在firefox上运行(我确定在假期之前使用了chrome)。但是现在Chrome只会淡出第一张图片而从不应用.first
类,因此会跳过后续动画。
JS
function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property").addClass('first').fadeIn(1500);
$(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);
JSFiddle:http://jsfiddle.net/pkyAS/1/
答案 0 :(得分:1)
在每个“property”div下你有一个带“不透明度:继承”的div删除“不透明度:继承”它应该有效。如果有更多问题,请告诉我。
这是my solution on fiddle。 我删除了你的间隔,并使“doRotator”运行一次 - 我更容易调试
顺便说一句 - fadeIn(1500)在你的间隔时间。 如果您的间隔是3000毫秒,并且您有fadeIn(1500) - 那么div将可见1.5秒。
当fadeOut完成时,考虑使用3000触发“setTimeout(doRotator,3000)”。
编辑:如何强制删除“不透明:继承” - 你可以简单地附加一些JS代码来强制它。 function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property")
.addClass('first').fadeIn(1500).find("div:first").css("opacity",null); $(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);