在调整页面大小后停止.css（）jquery继续运行

要让jquery按我所希望的方式工作，我遇到了一些问题。基本上我只想在大屏幕上运行动画。有什么想法吗

function checkWidth() {
    var animateStop = 1;
    var windowWidth = $(window).width();
    if (windowWidth >= 800) {
        $(window).scroll( $.debounce( 10, true, function() {
            fromTop = $(window).scrollTop();
            if (fromTop < 1000 && animateStop === 1){
                $("#logo").css({
                    "top":  (.535 * fromTop) + "px", "transform": "scale(" + (1 - (0.001 * fromTop)) + ")"
                });
            }
        }));
    }
    else {
        animateStop = 0;
    }
}

checkWidth();
$(window).resize(checkWidth);

函数checkWidth（）{
var animateStop=1；
var windowWidth=$（window.width（）；
如果（窗宽>=800）{
$（窗口）。滚动（$.debounce（10，true，function（））{
fromTop=$（window.scrollTop（）；
if（fromTop<1000&&animateStop==1）{
$（“#徽标”）.css({
“顶部”：（.535*fromTop）+“px”，“变换”：“比例”（+（1-（0.001*fromTop））+）”
});
}
}));
}
否则{
animateStop=0；
}
}
检查宽度（）；
$（窗口）。调整大小（选中宽度）；

如您所见，我试图通过更改fromTop变量来插入代码，但它仍然忽略了我在第一个if语句变为true后设置的规则，即使有一次。不知怎的，它在循环，我想不出来。这方面我还不太熟悉

---

您可以预览实时运行的代码

您需要在

checkWidth

函数中“解除绑定”您的

滚动

事件处理程序。您可以使用jQuery的和方法来实现这一点。我建议您不要使用上的取消附加可能添加到$（窗口）的其他处理程序

function checkWidth() {
    var $window = $(window);
    var windowWidth = $window.width();

    if (windowWidth >= 800) {
        // Use `.on` so we can unbind using `.off`
        // and namespace our event
        $window.on('scroll.animation', $.debounce(10, true, function() {
            fromTop = $window.scrollTop();

            if (fromTop < 1000){
                $("#logo").css({
                    "top":  (.535 * fromTop) + "px",
                    "transform": "scale(" + (1 - (0.001 * fromTop)) + ")"
                });
            }
        }));
    } else {
        $window.off('.animation'); // Unbind previously attached handler
    }
}

checkWidth();
$(window).resize(checkWidth);

函数checkWidth（）{
变量$window=$（window）；
var windowWidth=$window.width（）；
如果（窗宽>=800）{
//使用`.on`以便我们可以使用`.off解除绑定`
//为我们的活动命名名称空间
$window.on（'scroll.animation'，$.debounce（10，true，function）（）{
fromTop=$window.scrollTop（）；
如果（从顶部<1000）{
$（“#徽标”）.css({
“顶部”：（.535*fromTop）+“px”，
“变换”：“比例（“+（1-（0.001*从顶部））+”）
});
}
}));
}否则{
$window.off（'.animation'）；//取消绑定以前附加的处理程序
}
}
检查宽度（）；
$（窗口）。调整大小（选中宽度）；

能否使用媒体查询来检测宽度和CSS3转换以执行动画？如果我正确理解了您的意图，请尝试在函数外部声明变量animateStop，因为每次调用函数时它都初始化为1，在这之后，在windowWidth condition.dougajmcdonald中将其设为1—我使用jquery而不是直接使用CSS3转换的要点是利用一个一致的值，该值实际上在页面滚动上上下计数。UkatJalal-谢谢，我稍后会尝试一下，但是由于下面的解释和简单的实现，我同意sdgluck的答案。