Остановка всех других анимаций без использования селектора в $ .animate с помощью step ()?

Question

Я анимирую объекты, используя массивы в моем селекторе, которые я по какой-то причине застрял в другом ТАКОМ посте, который я сделал .

Как я могу остановить другие анимации, которыебыли начаты с произвольных значений массива?Например: $({ x: 0 }).animate({

Например:

$({ x: 0 }).animate({
      x: 500
  }, {
      easing: 'linear',
      duration: 15000,
      step: function(now, fx) {
          // $(this).stop();
          var current_styles = $(selector).attr('style'),
              current_styles = string = current_styles.split(" ");

          var x = parseFloat(current_styles[1].replace('px', '').replace(';', ''));

          if ('x' === fx.prop) {
              x = now;
          }

          $(selector).attr({ style: 'margin-left: ' + x + 'px;' });

      },
      complete: function() {
          //
      }
  });

HTML:

<div class="row row_1"><button data-id="1">GO</button><div class="box" style="margin-left: 0;"></div></div>
<div class="row row_2"><button data-id="2">GO</button><div class="box" style="margin-left: 0;"></div></div>
<div class="row row_3"><button data-id="3">GO</button><div class="box" style="margin-left: 0;"></div></div>
<div class="row row_4"><button data-id="4">GO</button><div class="box" style="margin-left: 0;"></div></div>
<div class="row row_5"><button data-id="5">GO</button><div class="box" style="margin-left: 0;"></div></div>
<div class="row row_6"><button data-id="6">GO</button><div class="box" style="margin-left: 0;"></div></div>

CSS:

.row {
  background-color: green;
  margin-bottom: 1px;
  width: 600px;
}
.box {
  background-color: red;
  height: 20px;
  width: 20px;
  display: inline-block;
}
button {
  float: left;
}

Я хочу остановить все другие анимации, когда я запускаю эту.Однако я не могу использовать $(selector).stop();, поскольку он не работает.

JSFiddle & gif вопроса:

JSFiddle желаемых результатов (используя неправильное форматирование для моих целей):

Выможно остановить анимацию из step(), используя $(this).stop();, но это останавливает только ту анимацию, в которой вы находитесь.

В принципе, мне нужно иметь возможность остановить все другие анимации изатем продолжите анимацию, которая только что началась.Сам JS работает точно так, как задумано, мне просто нужно остановить старые анимации на их дорожках, когда запускается новая.

Мне не ясно элегантный и простой способ сделать это при использовании:

$({ x: 0 }).animate({

Спасибо, что нашли время рассмотреть мой вопрос

Answer 1

Сохранить предыдущую запущенную анимацию в переменной, чтобы вы могли получить к ней доступ (чтобы получить текущее значение и остановить его):

var prevAnimation;

function runAnimation(selector) {

  var start = 0;
  if (prevAnimation) {
    start = prevAnimation.get(0).x;
    prevAnimation.stop();
  }

  prevAnimation = $({ x: start }).animate({
      x: 500
  }, {
      easing: 'linear',
      // And so on

Обновленная скрипта: https://jsfiddle.net/7vk9d2te/9/

-- Обновление -

Если ваша анимация примерно на полях слева, вы могли бы действительно упростить ваш код, удалив функцию шага и позволив jQuery творить чудеса с

function runAnimation(selector) {

  var start = 0;
  if (prevAnimation) {
    start = parseFloat(prevAnimation.css('margin-left'));
    prevAnimation.stop();
  }

  prevAnimation = $(selector)
      .css('margin-left', start + 'px')
      .animate({ 'margin-left': 500 }, {
         easing: 'linear',
         duration: 15000,
      });
}

Fiddle:https://jsfiddle.net/7vk9d2te/10/