带有jQuery动画的慢/无响应动画

Question

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

我要在这里做的是，当用户向下滚动页面90像素时，div标签应该向下动画（从top：-50px到top：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; }

谁能弄清楚为什么我的代码hide / showHead函数如此草率？

谢谢，

彼得

Answer 1

试试这个：

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

Answer 2

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

Answer 3

尝试使用队列：false和亚历山大说使用.stop()

这里jsfiddle

http://jsfiddle.net/hwbPz/

Answer 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/

Answer 5

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

您可以尝试的一种可能性是在触发新动画之前停止所有先前的动画。 您可以使用.stop()来做到这一点。

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

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