javascript - 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'
                });
            }
        );
    }

});

大きなブラウザーでページを読み込むと、期待どおりに動作します。ホバー効果がアクティブになります。ブラウザーのサイズを変更して小さくし (ブレークポイントを超えて)、更新すると、機能します。ホバー効果は無効になります。しかし、その間に更新せずにウィンドウのサイズを変更すると、効果は応答しません。無効のまま (小さな画面から大きな画面にサイズ変更する場合) またはアクティブなまま (大きな画面から小さな画面にサイズ変更する場合) です。

確かに、これは小さな癖ですが、なぜそれが起こっているのか正確にはわかりません. 私が知る限り、ウィンドウのサイズが変更されると、ステートメントでチェックする必要がある変数を更新する必要があります。これが当てはまらない理由は何ですか？windowsizeif