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

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 变量，应该在 如果语句。我忽略了什么使情况并非如此？

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