简单的jquery推子在Chrome中不起作用

时间:2012-01-03 10:57:31

标签: javascript jquery google-chrome

我已经构建了一个非常简单的图像淡入淡出图库,它可以在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/

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);