jQuery javascript：当调整窗口大小时，如何停止正在运行的动画？

I have some animation inside a function. I only trigger the function when the window is above 640px. However, if the window is above 640px but it is resized below 640px, I would like to stop the ongoing animtion totally and let my css media queries style the elements. I have looked at the stop method , clearqueue and finish methods but cannot use them properly for what I'm trying to do.

我在函数中有一些动画。我只在窗口高于640px时触发该功能。但是,如果窗口高于640px但调整大小低于640px,我想完全停止正在进行的动画,并让我的css媒体查询样式元素。我已经看过stop方法,clearqueue和finish方法但是不能正确地使用它们来完成我正在尝试的方法。

function myAnimations() {
    // some animations
}

$(document).ready(function() {

    if (!isMobile && winWidth > 640) {

      myAnimations();

        $(window).resize(function() {
          // checking if window got resized below 640px

          if (winWidth < 640) {

                // How do I totally cancel the ongoing animation
                // which was just triggered before the window got resized ? 
                // So that my css media query can style the elements.

            }
        })

     }
  }

2 个解决方案

#1

This should work.

这应该工作。

if (winWidth < 640) {
    $("*").is(":animated").stop();
}

#2

If you are using only the jQuery animations you may use the .stop() together with :animated selector.

如果您只使用jQuery动画,则可以将.stop()与:动画选择器一起使用。

If, instead, you are using CSS animation you may refer to animationend, animationstart, animationiteration events.

相反,如果您使用的是CSS动画,则可以参考animationend,animationstart,animationiteration事件。

The snippet with an infinite jQuery animation:

带有无限jQuery动画的片段:

function myAnimations() {
  $('.block').animate({'margin-left':'100px'},2000).animate({'margin-left':'0px'},2000, myAnimations);
}


$(function () {
  myAnimations();

  
  $('#Stop').on('click', function(e) {
    while ($(':animated').length > 0) {
      $(':animated').stop();
    }
  })
  
  
  $('#Start').on('click', function(e) {
    myAnimations();
  })
});

div {
  position: absolute;
  background-color: #abc;
  left: 0px;
  top: 30px;
  width: 60px;
  height: 60px;
  margin: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="Stop">Stop animation</button>
<button id="Start">ReStart animation</button>
<div class="block"></div>

#1