Javascript jQuery:animate if-else滚动函数

我设置了一个滚动功能，因此当窗口滚动超过50px时，

.header wrap

div会从

140px

的高度动画化到

70px

，理想情况下，当您从顶部向后滚动小于50px时，

.header wrap

div应该从

70px

动画返回到

140px

，但该函数似乎没有正常工作：
jsFiddle:

HTML:

jQuery：

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".header-wrap").animate({
            height: "70px"
        }, 500);
    } else {
        $(".header-wrap").animate({
            height: "140px"
        }, 500);
    }
});

---

这个函数似乎没有像我上面描述的那样工作，并且没有根据窗口滚动的距离设置div高度的动画。非常感谢您的任何建议

这可能是动画冲突的问题，因为如果您缓慢滚动，您的示例将正常工作。 设置触发器以确定何时/是否播放高度动画应更正冲突。 以下是该工作模式的一个示例：

var-sizeTrigger='toll'；
$（文档）。滚动（函数（）{
console.log（window.scrollY）；
如果（window.scrollY>50&&sizeTrigger=='tall'）{
$（“.header wrap”）.animate({
高度：“70px”
}，500，函数（）{
sizeTrigger=‘小’；
console.log（sizeTrigger）；
}); 
}else if（window.scrollY<50&&sizeTrigger=='small'）{
$（“.header wrap”）.animate({
高度：“140像素”
}，500，函数（）{
sizeTrigger=‘高’；
console.log（sizeTrigger）；
});
}
});

这可能是一个动画冲突的问题，因为如果您缓慢滚动，您的示例将正常工作。 设置触发器以确定何时/是否播放高度动画应更正冲突。 以下是该工作模式的一个示例：

var-sizeTrigger='toll'；
$（文档）。滚动（函数（）{
console.log（window.scrollY）；
如果（window.scrollY>50&&sizeTrigger=='tall'）{
$（“.header wrap”）.animate({
高度：“70px”
}，500，函数（）{
sizeTrigger=‘小’；
console.log（sizeTrigger）；
}); 
}else if（window.scrollY<50&&sizeTrigger=='small'）{
$（“.header wrap”）.animate({
高度：“140像素”
}，500，函数（）{
sizeTrigger=‘高’；
console.log（sizeTrigger）；
});
}
});

在代码中添加一个

stop（）

，

$（“.header wrap”）.stop（）。设置动画

，这将停止任何当前正在执行的动画。这是一个带有修改代码的JSFIDLE:>>>单击此处将

stop（）

添加到您的代码中，

$（“.header wrap”）.stop（）.animate

，这将停止任何当前正在执行的动画。下面是一个带有修改代码的JSFIDLE:>>>单击此处发生的情况是，您的滚动函数将快速启动，尝试执行

animate（）

函数，该函数将把它们添加到浏览器的内存中。如果等待时间足够长，队列将到达终点，动画将按预期工作

简单的解决方案，在

animate（）前面添加
stop（true，false）

API:

如果要控制延迟，可以使用包装器函数捕获重复的事件

var headerwrap = $(".header-wrap"),
    delayedEvent = (function () {
        var timers = {};

        return function (callback, delay, id) {
            delay = delay || 500;
            id = id || "duplicated event";

            if (timers[id]) {
                clearTimeout(timers[id]);
            }

            timers[id] = setTimeout(callback, delay);
        };
    })();

$(document).scroll(function (ev) {
    delayedEvent(function () {
        var h = (window.scrollY > 50) ? 70 : 140;
        headerwrap.stop(true, false).animate({ height: h }, 500);
    }, 500, "scroll event");
});

FIDDLE:
发生的情况是，您的滚动功能将快速启动，尝试执行
animate（）
功能，这将把它们添加到浏览器的内存中。如果等待时间足够长，队列将到达终点，动画将按预期工作

简单的解决方案，在
animate（）前面添加
stop（true，false）

API:

如果要控制延迟，可以使用包装器函数捕获重复的事件

var headerwrap = $(".header-wrap"),
    delayedEvent = (function () {
        var timers = {};

        return function (callback, delay, id) {
            delay = delay || 500;
            id = id || "duplicated event";

            if (timers[id]) {
                clearTimeout(timers[id]);
            }

            timers[id] = setTimeout(callback, delay);
        };
    })();

$(document).scroll(function (ev) {
    delayedEvent(function () {
        var h = (window.scrollY > 50) ? 70 : 140;
        headerwrap.stop(true, false).animate({ height: h }, 500);
    }, 500, "scroll event");
});

小提琴：这把很平滑…

var go = true;
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 && go) {
        $(".header-wrap").stop().animate({height:'70px'}, 500);
        go = false;
    } else if ($(this).scrollTop() < 50 && !go) {
        $(".header-wrap").stop().animate({height:'140px'}, 200);
        go = true;
    }
});

var go=true；
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>50&&go）{
$（“.header wrap”）.stop（）.animate（{height:'70px'}，500）；
go=假；
}else if（$（this）.scrollTop（）<50&&！go）{
$（“.header wrap”）.stop（）.animate（{height:'140px'}，200）；
去=真；
}
});

做了一把小提琴：
这把很平滑…

var go = true;
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 && go) {
        $(".header-wrap").stop().animate({height:'70px'}, 500);
        go = false;
    } else if ($(this).scrollTop() < 50 && !go) {
        $(".header-wrap").stop().animate({height:'140px'}, 200);
        go = true;
    }
});

var go=true；
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>50&&go）{
$（“.header wrap”）.stop（）.animate（{height:'70px'}，500）；
go=假；
}else if（$（this）.scrollTop（）<50&&！go）{
$（“.header wrap”）.stop（）.animate（{height:'140px'}，200）；
去=真；
}
});

摆弄一下：
你可以添加
停止
，但是你还需要确保它只触发一次
<50
和一次
>50
，以使其平滑。否则，它将触发每个滚动动作，并使动画起伏。您可以添加
停止
，但是您还需要确保它只触发一次
<50
和一次
>50
，以使其平滑。否则，它将触发每个滚动动作，并使动画不稳定。您需要在动画上添加
stop（）
，抓住滚动条并上下反复多次，您可以看到问题。您需要在动画上添加
stop（）
，抓住滚动条，上下翻动几次，你就能看到问题所在。嗯，不，它不会在每个滚动事件上触发动画。我添加了滚动位置作为文本来检查。与您的方法类似，您在滚动时计算
$（this）.scrollTop（）>50&&go
。那是我不会做的事。也许可以使用
窗口。滚动
来代替？因为这样我们就回来了。嗯，不，它不会在每个滚动事件上触发动画。我添加了滚动位置作为文本来检查。与您的方法类似，您在滚动时计算
$（this）.scrollTop（）>50&&go
。这是我不愿意做的事
var go = true;
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 && go) {
        $(".header-wrap").stop().animate({height:'70px'}, 500);
        go = false;
    } else if ($(this).scrollTop() < 50 && !go) {
        $(".header-wrap").stop().animate({height:'140px'}, 200);
        go = true;
    }
});