There is a slider with js-animation. Animation occurs by class substitution, their coordinates are given in css and in js - circleCoords .

I spread the code on plunker, because there is a lot of it and in order to understand the problem you need to see the event through the eyes: https://plnkr.co/edit/qHn1HytgxucUwl0tkBTe?p=preview

Before we clicked on the carousel element, the animate function each time takes an array with the names of the classes, at each iteration the last element of the array in the list is placed on the front (a cyclic shift occurs). When you click on an element, we change the order of the elements in the array, and submit it to the animate function in the appropriate order after changing classes in the html tree.

But for some reason, after the click, the elements begin to move erratically, and not as follows - one after another in the newly built queue. I am sure that I missed some trifle somewhere, I need a fresh look from the pro) Thank you for your attention!

  • @ Jean-Claude, well, very "useful" answer, congratulations! - sanu0074
  • @ sanu0074, and Jean-Claude did not give an answer. He simply expressed his opinion in the comments , so do not be offended at him, but rather, focus your attention on the answer below. :) - intro94

1 answer 1

I simplified the code a bit, it’s better to look at 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> = "http://gblor.ru/media/images/top/preview/lh4.googleusercontent.com--xfgxaCFbpWQ-U7m5_7EZ_yI-AAAAAAAFa5o-XLlGoYiMNZk-469928_main.jpg" alt = ""> <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> = "http://gblor.ru/media/images/top/preview/lh4.googleusercontent.com--xfgxaCFbpWQ-U7m5_7EZ_yI-AAAAAAAFa5o-XLlGoYiMNZk-469928_main.jpg" alt = ""> <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>