3

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

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

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

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

2
  • @Jean-Claude, ну очень "полезный" ответ, поздравляю!
    – sanu
    25 мая 2016 в 17:38
  • @sanu0074, а Jean-Claude ответ и не давал. Он просто высказал своё мнение в комментарии, поэтому не стоит на него обижаться, а, лучше, сосредоточьте своё внимание на ответе ниже. :)
    – NekoCoder
    25 мая 2016 в 21:35

1 ответ 1

4

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.