[已解決] JavaScript：滾動時消失的脈衝按鈕

Question

我正在一個網頁上有一個脈衝按鈕（＃scrollarrow）在頁面的底部。 當我開始滾動頁面時，此按鈕消失。 我獲得與下面的jQuery代碼這樣的效果：

$(document).ready(function(){ 

$(window).scroll(function(){    
     if ($(this).scrollTop() > 50) { 
      $('#scrollarrow').fadeOut('slow'); 
     }else{ 
      $('#scrollarrow').fadeIn('slow'); 
     } 
    }); 
}); 

直到有沒有問題。 會出現一些問題，當我嘗試添加脈衝效應（不透明度的簡單變化）：

function pulse(){ 
    $('#scrollarrow').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse); 
} 

我真的不能此功能適用於上面的代碼。我得到的最大結果是在滾動後看到按鈕脈動，就是這樣，實際上，與我的目標相反。 我嘗試了很多不同的組合，但沒有一個似乎正常工作。

有什麼建議嗎？

Answer 1

如果你想有箭頭脈衝，當用戶還沒有開始滾動，你可以做這樣的：http://jsfiddle.net/P99Ey/28/

$(document).ready(function(){ 
    // This function will animate the button and then 
    //call it self on completing the animation 
    function pulse() { 
     // This will make sure the button only animates 
     // when the user is at the top of the page 
     if ($(window).scrollTop() <= 50) { 
      $('#scrollarrow').delay(200).fadeOut('slow').delay(50).fadeIn('slow', pulse); 
     } 
    } 
    // This will trigger the animation on when document is ready 
    pulse(); 

    $(window).scroll(function(){    
     if ($(this).scrollTop() > 50) { 
      // This will stop the animation 
      $('#scrollarrow').clearQueue(); 
      // This will hide the bar 
      $('#scrollarrow').fadeOut("slow"); 
     }else{ 
      // This will restart the animation when the user 
      // scrolls back to the top of the page 
      pulse(); 
     } 
    }); 
}); 

Answer 2

可能是值得探討CSS3 Animations，可以設置幾個關鍵幀來控制按鈕並使其與JavaScript分開。雖然使用CSS3的browser support不太好，但讓瀏覽器找出動畫還是有性能優勢的。它顯然適用於JavaScript禁用的人。

Answer 3

我想這會幫助你：

HTML

<div id="scrollarrow">Test</div> 

CSS

#scrollarrow 
{ 
    position:fixed; 
} 

jQuery的

$(function() { 
    function run_animation($element, delay, duration) { 
     $element.delay(delay).fadeToggle(duration, function() { 
      run_animation($element, delay, duration); 
     }); 
    } 
    run_animation($('#scrollarrow'), 100, 50); 
}); 

$(window).scroll(function(){    
     if ($(this).scrollTop() > 50) { 
      $('#scrollarrow').fadeOut('slow'); 
     }else{ 
      $('#scrollarrow').fadeIn('slow'); 
      // This will restart the animation when the user 
      // scrolls back to the top of the page 
      pulse(); 
     } 
    }); 

演示：click me :)