Question

我在函数中有一些动画。我只在窗口高于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.

            }
        })

     }
  }

Answer 1

这应该有用。

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

Answer 2

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

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

带有无限jQuery动画的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: