简单的jQuery推子不能在Chrome中工作

我已经构建了一个非常简单的图像淡入淡出画廊sorta的东西，它在Firefox上工作（我肯定在假期之前在Chrome上工作）。但是现在，Chrome只会淡出第一张图片，并且从不应用.first类，因此后续动画会被跳过。简单的jQuery推子不能在Chrome中工作

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/

来源

2012-01-03 rickyduck

你想选择3个不同的类吗？ rotator3，财产和第一？ – Eli 2012-01-03 11:03:33

不，他正在选择一个元素，它具有*属性和第一个类，它们是具有'rotator3'类的元素的后代。 – 2012-01-03 11:05:31

@DavidThomas正好。查看JSFiddle for HTML（在这里粘贴太多） – rickyduck 2012-01-03 11:07:46

下DIV你有一个div每个 “属性”， “不透明度：继承” 删除 “不透明度：继承”，它应该工作。让我知道是否还有更多问题。

这里是my solution on fiddle。我删除了你的间隔时间，并且让“doRotator”运行一次 - 这对我来说更容易调试

顺便说一下 - fadeIn（1500）在你的间隔时间内。如果您的间隔时间为3000毫秒，并且您有淡入（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);

来源

2012-01-03 11:23:37

关于'setTimeout'，欢呼声。我最初做到了，但只是在玩耍。 “opacity：inherit'是由css3pie（盒子上的圆角）造成的......我应该使用'！important'吗？ – rickyduck 2012-01-03 11:32:36

我对它做了一个破解，并且认识到也许在$ .each（）中玩耍也会有一些不错的用法。 – Eli 2012-01-03 11:43:53

添加了我的蛮力解决方案，以消除“不透明度”。我在fadeIn后面追加'.find（“div：first”）.css（“opacity”，null）''。 – 2012-01-03 11:57:05

简单的jQuery推子不能在Chrome中工作

回答

相关问题