javascript – Correct replacement of classes in the gallery

Question:

There is a slider with js animation. Animation occurs by replacing the class, their coordinates are set in css and in js – circleCoords .

I post the code on plunker, tk. there is a lot of it and to understand the problem you need to see the event with your eyes: https://plnkr.co/edit/qHn1HytgxucUwl0tkBTe?p=preview

Before we haven’t clicked on the carousel element yet, the animate function takes an array with class names each time, at each iteration the last array element in the list is put on the front (there is a cyclic shift). When we click on an element, we change the order of the elements in the array, and feed it to the animate function in the appropriate order after changing the classes in the html-tree.

But for some reason, after clicking, the elements begin to move randomly, and not properly – one after another in a newly built queue. I'm sure that somewhere I missed some trifle, I need a fresh look from the pros) Thank you for your attention!

Answer:

Simplified the code a little, it's better to look at the result on the whole page.

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterpiecesGalery">
  <div class="container">
    <div class="animation-wrap" data-animate>
      <div data-id="obj1" class="move1 active">
        <div class="content">
          <img class="small" src="https://s-media-cache-ak0.pinimg.com/736x/81/27/a9/8127a9098b861095f262f6200e21c36e.jpg" alt="">
          <img class="big" src="https://s-media-cache-ak0.pinimg.com/736x/81/27/a9/8127a9098b861095f262f6200e21c36e.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
      <div data-id="obj2" class="move6">
        <div class="content">
          <img class="small" src="http://komanda-k.ru/sites/default/files/verh_poperech.jpg" alt="">
          <img class="big" src="http://komanda-k.ru/sites/default/files/verh_poperech.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
      <div data-id="obj3" class="move5">
        <div class="content">
          <img class="small" src="http://begloglot.ru/uploads/images/00/00/08/2014/07/11/1a17e956fb.jpg" alt="">
          <img class="big" src="http://begloglot.ru/uploads/images/00/00/08/2014/07/11/1a17e956fb.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
      <div data-id="obj4" class="move4">
        <div class="content">
          <img class="small" src="https://s-media-cache-ak0.pinimg.com/736x/5a/5a/49/5a5a499791f5fdc93918095d205cc937.jpg" alt="">
          <img class="big" src="https://s-media-cache-ak0.pinimg.com/736x/5a/5a/49/5a5a499791f5fdc93918095d205cc937.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
      <div data-id="obj5" class="move3">
        <div class="content">
          <img class="small" src="http://cs627329.vk.me/v627329372/4981f/I6kB3Rbn_DU.jpg" alt="">
          <img class="big" src="http://cs627329.vk.me/v627329372/4981f/I6kB3Rbn_DU.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
      <div data-id="obj6" class="move2">
        <div class="content">
          <img class="small" src="http://gblor.ru/media/images/top/preview/lh4.googleusercontent.com--xfgxaCFbpWQ-U7m5_7EZ_yI-AAAAAAAFa5o-XLlGoYiMNZk-469928_main.jpg" alt="">
          <img class="big" src="http://gblor.ru/media/images/top/preview/lh4.googleusercontent.com--xfgxaCFbpWQ-U7m5_7EZ_yI-AAAAAAAFa5o-XLlGoYiMNZk-469928_main.jpg" alt="">
          <a href="#"></a>
        </div>
      </div>
    </div>
  </div>
</div>
Scroll to Top