jQuery滾動到div上同時淡入淡出和動畫

我一直在試圖讓這個jQuery正確，但我似乎無法做到正確。我試圖做的是有一個用戶滾動，當他們滾動到相應的像素限制，jquery淡入淡出和動畫會發生，創造一個很酷的小效果。我試圖使用fadeIn，但它不能同時工作，所以我使用css。問題是，當我使用它時，當我繼續滾動時，圖像會繼續閃爍。jQuery滾動到div上同時淡入淡出和動畫

這是我的代碼。

$(window).bind("scroll", function() { 
    if ($(this).scrollTop() > 560) { 
     $('#subOverlay').css({'display':'block', 'opacity':'0'}) 
     .animate({'opacity':'1','left':'25%'}, 1500); 
    } else { 
     $("#subOverlay").stop().fadeOut(); 
    } 
});

你會注意到在我上面的代碼中，我希望用戶滾動到560像素，然後讓這些效果同時工作。我試圖糾正這種「閃爍」，但我無法得到它。我曾嘗試使用.fadeIn(1000).animate({'opacity':'1','left':'25%'}, 1500);，但它不會產生我試圖同時實現的效果。

請參閱JSFIDDLE瞭解我正在談論的示例。你能幫我嗎？或者將我指向正確的方向？謝謝。

來源

2014-10-05 ValleyDigital

出了什麼問題上面的代碼？（旁邊是污染滾動事件？） – 2014-10-05 03:35:39

請張貼小提琴，以便我們可以更好地瞭解您的問題。 – 2014-10-05 03:49:53

好吧，沒問題，我會在1分鐘內更新。謝謝。 – ValleyDigital 2014-10-05 03:53:47

儘可能避免使用jQuery進行CSS工作。這包括css，animate，fadeOut等下面是一個例子，其中的JavaScript只有切換類：

http://jsfiddle.net/05Leto4e/1/

來源

2014-10-05 05:18:08 andyvanee

感謝您的幫助。這將工作。如果你知道如何在不使用CSS「過渡」的情況下創建這個更好的方法。淡入淡出和動畫可以同時使用嗎？否則，我將不得不考慮支持跨瀏覽器的「過渡」，對吧？ – ValleyDigital 2014-10-05 05:37:56

是的，即使您想使用'animate'和'fadeIn'，我發佈的代碼也會有所幫助。原來的問題是，if語句的第一部分在滾動到560以上時每秒運行數百次。您需要'overlay_hidden'變量來確保只運行一次。 – andyvanee 2014-10-05 05:46:43

jQuery滾動到div上同時淡入淡出和動畫

回答

相關問題