Правильная замена классов в галерее

#javascript #jquery

Есть слайдер с js-анимацией. Анимирование происходит путем подмены класса, их координаты
заданы в css и в js - circleCoords. 

Код выкладываю на plunker, т.к. его много и чтоб понять проблему нужно увидеть событие
глазами: https://plnkr.co/edit/qHn1HytgxucUwl0tkBTe?p=preview

Перед тем как мы еще не кликали на элемент карусели, функция animate каждый раз принимает
массив с именами классов, на каждой итерации последний в списке элемент массива ставится
на перед (происходит циклический сдвиг). При клике на элемент, мы меняем очередность
элементов в массиве, и подаем его в функцию animate в соответствующем порядке после
изменений классов в html-дереве. 

Но почему-то, после клика, элементы начинают сдвигаться беспорядочно, а не как следует
- друг за другом в новой построенной очереди. Я уверен что где-то пропустил какую-то
мелочь, нужен свежий взгляд профи) Благодарен за внимание!
    

Ответы

Ответ 1

немного упростил код, смотреть результат лучше на всю страницу.



var dd = $("[data-id]"),
      elems = $.makeArray(dd),
      circleCoords = [{
        top: 0,
        left: 229
      }, {
        top: 100,
        left: 677
      }, {
        top: 265,
        left: 603
      }, {
        top: 265,
        left: 307
      }, {
        top: 265,
        left: 14
      }, {
        top: 100,
        left: -58
      }];
    dd.on("click", function() {
      var i = $.inArray(this, elems);
      elems[i] = elems[0];
      elems[0] = this;
      $(elems[i]).removeClass("active");
      move()
    });

    function move() {
      var deferreds = [];
      $(elems[0]).addClass("active");
      $.each(elems, function(indx, el) {
        deferreds.push($(el).animate(circleCoords[indx],2000))
      });
      $.when.apply(null, deferreds).done(function() {
        if (!busy) timer = window.setTimeout(function() {
          var el = elems.pop();
          $(elems[0]).removeClass("active");
          elems.unshift(el);
          move()
        }, 2000)
      })
    }
    var busy, timer;
    $(".container").mouseleave(function() {
      busy = false;
      !dd.queue("fx").length && move()
    }).mouseenter(function() {
      window.clearTimeout(timer);
      busy = true
    });
    move()
.container {
  padding-top: 30px;
}
.animation-wrap {
  position: relative;
  width: 1170px;
  height: 565px;
  margin: auto;
  overflow: hidden;
}
.animation-wrap a {
  display: none;
  position: absolute;
  width: 119px;
  height: 30px;
  z-index: 72;
  top: 279px;
  left: 196px;
}
.animation-wrap .small {
  position: absolute;
  width: 222px;
  height: 131px;
  left: 50%;
  top: 50%;
  margin-left: -138px;
  margin-top: -81px;
  cursor: pointer;
  z-index: 2;
  opacity: 1;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.animation-wrap .small:hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}
.animation-wrap .big {
  position: absolute;
  opacity: 0;
  margin: 0 auto;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.active .small {
  opacity: 0;
  cursor: default;
}
.active .big {
  opacity: 1;
  z-index: 3;
  width: 507px;
  height: 360px;
}
[data-id] {
  position: absolute;
  width: 400px;
  height: 380px;
}
[data-id=obj1] {
  top: 70px;
  left: -165px;
}
[data-id=obj2] {
  top: 0;
  left: 285px;
}
[data-id=obj3] {
  top: 70px;
  left: 730px;
}
[data-id=obj4] {
  top: 285px;
  left: 610px;
}
[data-id=obj5] {
  top: 285px;
  left: 285px;
}
[data-id=obj6] {
  top: 285px;
  left: -40px;
}