1

我有一个响应式布局，并使用 jQuery 创建了一个渐变面板动画元素。我将 jQuery 函数设置为仅在用户超过特定屏幕尺寸时才激活。但是，如果我缩小窗口，该函数仍然运行。

这是我想要实现的目标：

  1. 当用户滚动浏览器宽度为 1440 像素时，停止该淡入淡出的面板动画。
  2. 动画停止后，我想重置该区域以显示第一个面板。
  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/

4

3 回答 3

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

请注意，您必须仍在您的init函数中才能获取infiniteLoop变量。

于 2012-04-07T09:47:01.813 回答
0

您可以使用

window.onresize = function(){ ... }
于 2012-04-07T08:47:09.020 回答
0 
$(window).resize(function() {
  //stop and reset animation in here.
});
于 2012-04-07T08:47:28.527 回答