JavaScript：滚动时消失的脉冲按钮

我在一个网站上工作，该网站在页面底部有一个脉冲按钮滚动箭头。 当我开始滚动页面时，此按钮消失。 我使用以下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);
}

我真的无法将此函数应用于上面的代码。我得到的最大结果是看到按钮在滚动后脉冲，这实际上与我的目标相反。 我尝试了很多不同的组合，但没有一个能正常工作

---

有什么建议吗？

如果您想在用户还没有开始滚动时让箭头跳动，您可以这样做：

---

可能值得一看，您可以设置几个关键帧来脉冲按钮，并将其与JavaScript分开。虽然使用CSS3的效果不如使用CSS3好，但让浏览器了解动画有性能优势。它显然适用于禁用JavaScript的用户。

我想这将帮助您：

HTML

jquery

---

演示：

你能发布一个JSFIDLE让我们看看你的意思吗？嗨，Mathias，谢谢，但我觉得你的脚本似乎不起作用。不幸的是，按钮在滚动后始终可见，但没有消失。我想我现在已经修复了它。将$this更改为$Window谢谢Mathias，它正在工作..仅一次！：如果我向上滚动到页面顶部，按钮再次正确显示，但失去了错误的脉冲效果：很抱歉，我试图理解为什么，但没有得到答案。@user3323340好吧，如果你想再次脉冲，你需要在scroll eventhandler中再次调用脉冲。看看我的updateThanks Mathias，这个脚本在chrome和ie上运行得很好，但在safari中却不起作用。使用safary，如果我向下滚动菜单，按钮不会消失。但在一个示例JSFIDLE中，它在safari上也能完美地工作。所以，至少，我必须了解困扰脚本的元素是什么…可能是css…啊！不过非常感谢！！！事实上，Charlie，目前我正在使用css和jsquery的组合，但我更愿意使用js脚本Mahmoud nezar sarhan或您在我身上花费的时间来完成所有工作，但我刚刚用mathias脚本解决了我的问题希望这件事不要打扰你没问题，兄弟，我试着帮你：

$(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();
        } 
    }); 
});

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

#scrollarrow
{
    position:fixed;
}

$(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();
        } 
    });