为什么我的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(); 
});