簡單的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中工作

回答

相關問題