Есть слайдер с js-анимацией. Анимирование происходит путем подмены класса, их координаты заданы в css и в js - circleCoords.
Код выкладываю на plunker, т.к. его много и чтоб понять проблему нужно увидеть событие глазами: https://plnkr.co/edit/qHn1HytgxucUwl0tkBTe?p=preview
Перед тем как мы еще не кликали на элемент карусели, функция animate каждый раз принимает массив с именами классов, на каждой итерации последний в списке элемент массива ставится на перед (происходит циклический сдвиг). При клике на элемент, мы меняем очередность элементов в массиве, и подаем его в функцию animate в соответствующем порядке после изменений классов в html-дереве.
Но почему-то, после клика, элементы начинают сдвигаться беспорядочно, а не как следует - друг за другом в новой построенной очереди. Я уверен что где-то пропустил какую-то мелочь, нужен свежий взгляд профи) Благодарен за внимание!
Ответ
немного упростил код, смотреть результат лучше на всю страницу.
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;
}
Комментариев нет:
Отправить комментарий