[英]Looping div elements using jquery
I am trying to loop div elements, I was successful in looping two div elements in continuous manner. 我正在尝试循环div元素,以连续方式成功循环了两个div元素。 But when i extended the code to five divs the loop isn't extending to all the divs and there is an delay in the animation.I have used animate.css for the translation animation 但是当我将代码扩展到5个div时,循环并没有扩展到所有div,并且动画存在延迟。我已经将animate.css用于翻译动画
jsFiddle- http://jsfiddle.net/e62m6hfn/7/ jsFiddle- http://jsfiddle.net/e62m6hfn/7/
jQuery jQuery的
function animate($el) {
$el.addClass('animated lightSpeedOut');
}
var elCounter = 0;
$(document).ready(function () {
elCounter = $('.s-animate').length;
animate($('.s-animate').eq(elCounter - 1));
$('.s-animate').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
elCounter = (elCounter > 1) ? elCounter - 1 : $('.s-animate').length;
$('.s-animate').removeClass('bottom');
$(this).addClass('bottom');
$(this).removeClass('animated lightSpeedOut');
animate($('.s-animate').eq(elCounter - 1));
});
});
There is a problem with your z-index
applied in your class .bottom
. 您的类.bottom
应用的z-index
存在问题。
In fact you shouldn't remove the class at each loop, but instead, only at the end of all loops. 实际上,您不应该在每个循环中都删除该类,而应该仅在所有循环的末尾删除该类。
Here what I've changed in your code : 这是我在您的代码中所做的更改:
elCounter = elCounter - 1;
$(this).addClass('bottom');
if (elCounter <= 0) {
$('.bottom').removeClass('bottom');
elCounter = $('.s-animate').length;
}
instead of 代替
elCounter = (elCounter > 1) ? elCounter - 1 : $('.s-animate').length;
$('.s-animate').removeClass('bottom');
$(this).addClass('bottom');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.