爲什麼我的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(); 
});