Question

我有一些问题让这些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);

正如您所看到的，我试图通过更改fromTop变量来破坏代码，但它仍然忽略了我在第一个if语句变为true之后设置的规则，甚至一次。它以某种方式循环，我无法弄明白。我对此非常陌生。

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

Answer 1

您需要在scroll函数中“取消绑定”checkWidth事件处理程序。您可以使用jQuery的on和off方法执行此操作。我建议使用namespacing the event，以便您不会使用$(window)取消附加到on的其他处理程序。

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

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

1 个答案: