в jQuery, с несколькими анимациями на одном элементе, возможно ли .stop () по одной анимации за раз? - PullRequest
Новая
       24

в jQuery, с несколькими анимациями на одном элементе, возможно ли .stop () по одной анимации за раз?

0 голосов
/ 03 марта 2020

У меня есть один элемент с двумя запущенными анимациями, обе не находятся в очереди, поэтому они запускаются одновременно. Я пытаюсь найти способ остановить только одну из анимаций действий пользователя. Вот пример повторяющейся анимации в коде ручки и соответствующий код jQuery.

https://codepen.io/kevinahmadi/pen/WNvEoOg

var hSwing=function(element){
    element.animate({
      top:'100px'
    }, {
      queue:false,
      duration:1000,
      complete:function(){
        $(this).animate({
          top:'0px'
        }, {
          queue:false,
          duration:1000
        })
      }
    }).animate({
      left:'100px'
    }, {
      queue:false,
      duration:1000,
      complete:function(){
        $(this).animate({
          left:'0px'
        }, {
          queue:false,
          duration:1000,
          complete:function(){
            hSwing(element);
          }
        })
      }
    })
  }
  hSwing($('.swing'));

Я попытался поставить анимацию в очередь, но не могу запустить ее одновременно. Я попытался поместить их в функцию setTimeout и завершить каждый тайм-аут отдельно, но затем анимация не останавливается сразу.

В примере, если вы остановите анимацию, она остановит все. Есть ли способ организовать анимации в разные очереди, но при этом запускать их одновременно, чтобы их можно было остановить отдельно? Или какой-то другой метод?

...