Question

我正在使用jQuery在页面转换时添加一些元素（通过jQuery Transit插件）。由于我正在尝试响应式设计，我希望这些转换仅在浏览器大小或更大时才会发生。

我编写了以下代码作为尝试：

$(document).ready(function(){
    var $window = $(window);
    var $logo = $('.logo');

    function checkWidth() {
        windowsize = $window.width();
    }

    checkWidth();

    $(window).resize(checkWidth);

    if (windowsize >= 768) {
        $logo.hoverIntent(
            function(){
                $logo.transition({
                    perspective: '600px',
                    rotateY: '-10deg'
                });
            },
            function(){
                $logo.transition({
                    perspective: '600px',
                    rotateY: '0deg'
                });
            }
        );
    }

});

如果我在大型浏览器中加载页面，它会按预期工作 - 悬停效果处于活动状态。如果我调整浏览器的大小，使其缩小（超过断点）并刷新，则可以正常工作 - 禁用悬停效果。但是如果我在没有刷新的情况下调整窗口大小，那么效果就不会响应 - 它会保持禁用状态（如果从小屏幕大屏幕调整到大屏幕）或者活动（如果从大到小调整大小）。

这是一个小小的怪癖，当然，但我无法弄清楚为什么会发生这种情况。据我所知，当窗口调整大小时，应更新windowsize变量，应在if语句中进行检查。我忽略了什么使得情况并非如此？

非常感谢。

Answer 1

目前所有checkWidth都会为windowsize分配一个值。您需要将实际显示为windowsize的代码移动到checkWidth。

$(document).ready(function(){
    var $window = $(window);
    var $logo = $('.logo');

    function checkWidth() {
        windowsize = $window.width();

        if (windowsize >= 768) {
            $logo.hoverIntent(
                function(){
                    $logo.transition({
                        perspective: '600px',
                        rotateY: '-10deg'
                    });
                },
                function(){
                    $logo.transition({
                        perspective: '600px',
                        rotateY: '0deg'
                    });
                }
            );
        }
    }

    // can trigger the resize handler instead of
    // explicitly calling checkWidth()
    $(window).resize(checkWidth).resize();
});

为什么我的jQuery不响应窗口大小调整？

1 个答案: