带有 jQ​​uery 动画的慢速/无响应动画

Posted 2023-05-08

【中文标题】带有 jQ​​uery 动画的慢速/无响应动画

【英文标题】：Slow/unresponsive animation with jQuery animation

【发布时间】：2013-02-03 10:25:36

【问题描述】：

我正在编写一个小的 jQuery 函数，但我似乎遇到了麻烦。

我在这里尝试做的是当用户向下滚动页面 90 像素时，div 标签应该向下动画（从顶部：-50 像素到顶部：0），反之亦然，当他们滚动回顶部时页面。

我遇到的问题是动画有时似乎非常缓慢且无响应。我在 3 种不同的浏览器和不同的计算机上进行了测试，但我没有任何乐趣。

这是我的代码：

    // Show div
    var scrollValue = "90";

    // Animate functions
    var showHead = function ()
$(".element").animate(top: "0", 250);

var hideHead = function ()
$(".element").animate(top: "-50px", 250);


    $(window).scroll(function() 
        if ($(this).scrollTop() > scrollValue) 
            showHead();
         else 
            hideHead();
        
    );

.element 属性：

.element  positoin:fixed; top:-50px; 

谁能弄清楚为什么我的代码隐藏/显示头功能如此草率？

谢谢，

彼得

【问题讨论】：

请在您的问题中使用描述性和全面的标题。这不是错误发现比赛

想创建一个 jsfiddle.net 吗？我不确定你是如何设计.element 的，但这可能与它有关？

话虽如此，你有没有试过像$(".element").stop().animate( ... )一样使用.stop()？

尝试在调用 animate 之前添加一个 .stop()。

@PeterStuart，完美，你去吧

【参考方案1】：

scroll 事件被多次触发，即使它受到速率限制，它仍然是一个相当密集的操作。实际上，您可能正在排队几个动画，而fx 堆栈可能增长得非常快。

您可以尝试的一种可能性是在触发新动画之前停止所有以前的动画。您可以使用.stop() 来执行此操作。

$(".element").stop().animate(top: "0", 250);

.stop() 函数还提供了一些其他选项，您可以使用这些选项对其进行更多调整。

【参考方案2】：

试试这个：

$(window).scroll(function() 
    if (window.scrollY > scrollValue) 
        showHead();
     else 
        hideHead();
    
);

【参考方案3】：

scroll 事件在用户滚动期间多次发生。

在再次开始动画之前，您需要检查您的动画是否正在进行中。

试试这个：

// Show div
var scrollValue = "90";
var inProgress = false;

// Animate functions
var showHead = function () 
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate(
        top: "0"
    ,250,function()
        inProgress = false; //Reset when animation is done
    );

var hideHead = function () 
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate(
        top: "-50px"
    , 250,function()
        inProgress = false; //Reset when animation is done
    );


$(window).scroll(function () 
    if ($(this).scrollTop() > scrollValue) 
        showHead();
     else 
        hideHead();
    
);

【讨论】：

无需重新发明***，jQuery提供了:animated选择器。

【参考方案4】：

假设您有position:fixed（或其他某种样式，使栏在必要时可见）：

var scrollheight = 90;

var $el = $('.element');
function showHead()
    $el.stop().animate(
        top: '0px'
    , 250);

function hideHead()
    $el.stop().animate(
        top: '-50px'
    , 250);


$(window).scroll(function()
    if ($(window).scrollTop() > scrollheight)
        showHead();
    else
        hideHead();
    
);

示例：http://jsfiddle.net/L4LfL/

【参考方案5】：

尝试使用 queue: false ，正如亚历山大所说，使用 .stop()

这里是jsfiddle

http://jsfiddle.net/hwbPz/