Fadein和Fadeout在滾動

我試圖讓按鈕出現如果scrollTop> 200和隱藏scrollTop < 200.但我想按鈕淡出，出現問題。Fadein和Fadeout在滾動

繼承人我的javascript：

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
    $(".button").removeClass("opacity"); 
    } 
    else { 
    $(".button").addClass("opacity"); 
    };

和CSS：

.opacity { opacity:0; }

有了這樣的代碼顯示/隱藏功能工作正常，但不能使其向淡入。我也嘗試改變我的jscript到這個：

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
    $(".button").animate({"opacity":"1"}, 1500); 
    else { 
    $(".button").animate({"opacity":"0"}, 1500); 
    };

但與此它並不工作。

我試過的最後一件事是fadeIn和fadeOut屬性，但其後的其他按鈕在它顯示/隱藏之後改變了它們的位置（按鈕位置：fixed;頁面滾動），使得效果不是真的不錯..

任何想法，我可以使它淡入淡出？謝謝

來源

2012-05-18 user1207524

如何使用fadeIn/fadeOut更改其他按鈕的位置？也許他們有問題（http://jsbin.com/otabol/3） – wroniasty

你的代碼看起來不錯，但是我最好增加stop方法並減少持續時間。這應該很好地工作：

$(window).scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     $(".button").stop().animate({ 
      opacity: 1 
     }, 500); 
    } else { 
     $(".button").stop().animate({ 
      opacity: 0 
     }, 500); 
    } 
});

DEMO：http://jsfiddle.net/qXunw/

來源

2012-05-18 23:50:31 VisioN

Vision的答案似乎工作。我唯一要添加的是一個布爾值來跟蹤按鈕的動畫時間。

var animating = false;

這樣，你的if語句將類似於

if ($(this).scrollTop() > 200 && !animating) { ...

目的進行，事情是這樣的，現在的動畫繼續重置用戶保持滾動，每次設置爲1.5的間隔秒。所以按鈕不會完全淡入，直到你停止滾動，這可能不是你想要的。要解決這個問題，當設置淡入時，將'animating'布爾值設置爲true，然後在回調函數中將其設置爲false。

來源

2012-05-19 00:22:25

Fadein和Fadeout在滾動

回答

相關問題