jQuery的淡入淡出「閃爍」在Chrome，適用於Firefox和IE

精細請看看我的代碼在這裏：。 http://jsfiddle.net/gt4Rj/jQuery的淡入淡出「閃爍」在Chrome，適用於Firefox和IE

我想要的東西淡出，然後淡入它完美，我希望它在Firefox和IE上。但它在Chrome上顯示出一個奇怪的「閃現」。我已經使fadeOut和fadeIn儘可能簡單。但似乎沒有任何理由。

HTML：

<body> 
    bbbbbbb 
</body>

JS：

jQuery('body') 
.addClass('fixed-top fadeIn') 
     .fadeOut(1000).fadeIn(1000);

CSS：

.fixed-top { 
    background:transparent; 
    overflow: hidden; 
    z-index: 10; 

} 
@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 


.fadeIn { 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: backword; 
    -webkit-animation-name: fadeIn; 
}

來源

2013-12-13 Joanne

請檢查：http://jsfiddle.net/gt4Rj/4/ 爲什麼你需要.fadeIn類？ – Turgut

我只是刪除你的CSS中的'.fadeIn' .... – l2aelba

@Turgut：感謝您的評論。這是針對Chrome的。儘管我刪除了它，但它仍然不能正常工作，因爲它在Firefox中。根據你的jsFiddle，你的Chrome瀏覽器在開始時仍然閃爍，但不在Firefox中。請在Firefox和Chrome中看到你的小提琴。您將看到不同之處：在Chrome中，它一開始閃爍一次，就像在Firefox中一樣，它直接從「FadeOut」開始。 – Joanne

此問題是由於動畫持續時間的CSS，你已經添加了.fadeIn引起的。刪除持續時間的CSS，一切都會完美的工作。

.fadeIn { 
-webkit-animation-fill-mode: backword; 
-webkit-animation-name: fadeIn; 
}

Working Fiddle

來源

2013-12-13 08:12:38

感謝您的想法。但根據你的jsFiddle，你仍然在Chrome的開始時閃爍，但在Firefox中卻不閃爍。請在Firefox和Chrome中看到你的小提琴。您將看到不同之處：在Chrome中，它一開始閃爍一次，就像在Firefox中一樣，它直接從「FadeOut」開始。 – Joanne

這是因爲dom首先加載，然後淡出淡出in.You甚至會發現內容閃爍，如果你刪除js代碼。 –

但是，它不會發生在Firefox中。這是爲什麼？感謝您的幫助@Milind Anantwar – Joanne

我不認爲使用jQuery動畫線CSS3動畫是一個好主意。下面的代碼可能會有所幫助，只是簡單地使用jQuery fadeIn和fadeOut。

var $body = jQuery('body') 
$body.fadeOut(1000, function() { 
    $body.fadeIn(1000); 
});

來源

2013-12-13 08:22:31 Jerry

謝謝你的建議。儘管我使用純粹的jQuery fadeIn和fadeOut，但它在Chrome中開始「淡入淡出」之前仍然閃爍一次，但在Firefox中卻沒有。 – Joanne

你刪除了你的CSS？在嘗試之前刪除你的css，因爲你的css會影響動畫。 @Joanne – Jerry

是的。 http://jsfiddle.net/h3pjb/在Chrome和Firefox中查看它，你會看到不同之處。如果您錯過了Chrome中的第一次眨眼，請再次運行它。 – Joanne

jQuery的淡入淡出「閃爍」在Chrome，適用於Firefox和IE

回答

相關問題