javascript - レスポンシブウェブデザインで、JavascriptまたはjQueryを使用して関数を停止し、ユーザーがウィンドウを縮小したときにリセットするにはどうすればよいですか？

Question

レスポンシブレイアウトがあり、jQueryを使用してフェージングパネルのアニメーション要素を作成しました。ユーザーが特定の画面サイズを超えている場合にのみアクティブになるようにjQuery関数を設定しました。ただし、ウィンドウを縮小しても、関数は実行されます。

これが私が達成したいことです：

1. ユーザーがブラウザの幅を1440ピクセル以下にスクロールしたら、そのフェードパネルのアニメーションを停止します。
2. アニメーションが停止したら、領域をリセットして1番目のパネルを表示したいと思います。
3. ユーザーがその画面サイズより上にスクロールして戻った場合は、アニメーションを再開します。

これが私のコードです。よろしくお願いします。

// Get the viewport size!
var viewport = $(document).width();

if (viewport >= 1140) {

var InfiniteRotator = 
{
    init: function() 
    {
        // hard set height of container
        $('#circles').height('286.717px');

        // initial fade-in time
        var initialInterval = 3000;

        // interval between items
        var itemInterval = 5000;

        // cross-fade time
        var fadeTime = 2000;

        // count number of items
        var numberOfItem = $('.rotating-item').length;

        // set current item
        var currentItem = 0;

        // create loop
        var infiniteLoop = setInterval(function() { 

            // initial fade out
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            // set counter
            if (currentItem == numberOfItem -1) {
                currentItem = 0;
            } else {
                currentItem++;
            }

            // next item fade in
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
}

// go Go GO!
InfiniteRotator.init();
}

注：このすばらしいチュートリアルを使用して、フェードパネルを作成しました：http：//trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

Answer 1

window.onresize = function() {
    clearInterval(infiniteLoop)
}

変数initを取得するには、関数内にいる必要があることに注意してください。infiniteLoop

Answer 2

使用できます

window.onresize = function(){ ... }

Answer 3

$(window).resize(function() {
  //stop and reset animation in here.
});