1

当悬停在页面上时，我正在使用 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语句中检查。我忽略了什么使情况并非如此？

4

1 回答 1

2

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();
});
于 2013-07-08T23:42:55.570 回答