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 :)

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

3 个答案: