Почему мой 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, которую должен быть отмечен в заявлении 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(); 
});