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

我有一个动画，其中三个图像上下旋转。JSfiddle：

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

所以我的问题。我怎样才能：

• 仅当窗口宽度>940px时，才在页面加载时启动动画
• 如果页面大小调整为<940px宽，则停止（重置）动画
• 然后，如果页面大小调整为>940px宽，则重新启动动画

---

您应该使用

window.matchMedia

（请参阅）来检测

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();
}

---

请注意，您实际上不需要停止document.ready上的动画，但通过这种方式，您可以使用单个功能重置动画，然后仅在必要时重新启动动画，这是每次调整浏览器窗口大小时通常要执行的操作，无论视口大小如何。

我将按顺序引用它们：

1。仅当窗口宽度>940px时，才在页面加载时启动动画

在窗口加载函数中，使用$（window）.width（）获取浏览器宽度。然后对照您的940检查（去掉“px”），并执行必要的操作

因此：

2。如果页面大小调整为<940px宽，则停止（重置）动画

为此，您需要使用窗口调整大小函数（$（window）.resize（））并对照浏览器宽度检查940

因此：

---

为什么要在调整事件大小时专门执行此操作？页面加载时的屏幕检测是否足以满足您的需要？我只需要使用

$（window.width（）

，只需打开一个布尔值true/false，就可以启动/跳过动画功能-我的问题应该更清楚-我知道如何执行您描述的操作-我需要了解答案中的停止（重置）动画和重新启动动画方面的信息。啊，好的。我的错误。我猜这些横幅是坐着的位置：绝对在一个带有overflow:hidden的包装中，而你的函数只是让它们改变它们的底部值？如果是这样的话，当您在940px以下移动时，提供一个使您的第一个横幅接收底部值0的参数可能有效。这对我不起作用-主要是因为

$firstBanner

和

$secondBanner

作为动画功能的一部分被旋转。如果您需要完全重置它们的状态，您可以尝试使用

$firstBanner.removeAttr（'style'）

或者，jQuery的

stop

函数接受允许您重置动画状态的参数：请参阅“我编辑了我的答案”上的文档，以反映符合您需要的

stop

用法。不，仍然没有运气。我在这里竖起了一把小提琴，这也许能更好地解释这个问题。

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();
}

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

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

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