Question

我有一个动画，其中三个图像上下旋转。 JSfiddle：http://jsfiddle.net/rLgkyzgc/1/

$(window).load(function() {

    // Load images in BG that have been hidden by CSS
    $('.banners').show();

    // Create an empty array
    var banners = [];

    // Fill array with banner ids
    $('.banners').each(function () {
        var banner = $(this).attr('id');
        banners.push(banner);
    });

    function switchBanners(){

        var $firstBanner = $('#' + banners[0]);
        var $secondBanner = $('#' + banners[1]);
        var firstBannerHeight = $firstBanner.height();
        var secondBannerHeight = $secondBanner.height();

        $firstBanner.animate({ bottom: -firstBannerHeight }, 1200);
        $secondBanner.animate({ bottom: 0 }, 1200, function(){
            b = banners.shift(); banners.push(b);
            setTimeout(function(){
                switchBanners();
            }, 4000);
        });
    };

    // Delay initial banner switch
    setTimeout(function(){
        switchBanners();
    }, 4000);

});

这对桌面视图很有用，但在移动设备上，我想停止动画并只显示一个静态图像。

所以我的问题。我怎么能：

如果窗口宽度为＆gt;，则仅在页面加载时启动动画。 940px
如果页面的大小调整为＆lt;
停止（重置）动画。 940px宽
如果页面调整为＆gt;则重新启动动画。 940px宽

Answer 1

您应该使用window.matchMedia（请参阅documentation）来检测document.ready上的视口大小以及调整窗口大小时的内容，如下所示：

function resetAnimation() {
    $firstBanner.stop(true, true);
    $secondBanner.stop(true, true);
    if(window.matchMedia("(min-width: 940px)").matches) {
        //Start the animations here
    }
}


$(document).ready(function() {
    resetAnimation();
}

$(window).resize(function() {
    resetAnimation();
}

请注意，您并非真的需要stop document.ready上的动画，但这样您只需一个功能来重置动画，然后只在必要时重新启动它们，这就是你的意思通常希望每次调整浏览器窗口大小时都这样做，无论视口大小如何。

Answer 2

我将按顺序引用这些：

<强> 1。如果窗口宽度> 1，则仅在页面加载时启动动画。 940px

在窗口加载功能中，使用$（window）.width（）获取浏览器宽度。然后检查你的940（离开“px”），并执行必要的操作。

所以：

if ($(window).width() > 940){ *actions* }

<强> 2。如果页面的大小调整为＆lt;停止（重置）动画。 940px宽

为此，您需要使用窗口调整大小功能（$（window）.resize（））并根据浏览器宽度检查您的940.

所以：

$(window).resize(function(){
  if ($(window).width() <= 940){
    *stop (reset) animation*
  }
});

第3。然后，如果页面调整大小为＆gt;则重新启动动画。 940px宽

这个逻辑与＃2基本相同，只是颠倒了：

$(window).resize(function(){
  if ($(window).width() > 940){
    *restart animation*
  }
});

在窗口调整大小时停止/重新启动动画循环

2 个答案: