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

Question

我使用jQuery在悬停时（通过jQuery Transit插件）在页面转换中添加一些make元素。由于我试图进行响应式设计，所以我希望只有当浏览器达到一定大小或更大时才会发生这些转换。

为了做到这一点，我写了以下代码：

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