我想要的是
我在尝试着创建动画 using fadeIn()/fadOut()jQuery 中的函数，我完成了动画，但它只工作一次，尽管我希望它重复多次
我尝试过的
我尝试使用 setInterval() 函数执行此操作两次，其中使用 TotalDur 变量添加动画总时间的持续时间，并将其传递给父级 setInterval 函数
这是我所做的，请检查这个
$(document).ready(function() {
//this is for repeat again
setInterval(function() {
$('.box').each(function(index) {
//this is for each box animation
setInterval(function(eachshowdiv) {
eachshowdiv.fadeIn();
}, index * 800, $(this));
});
}, 2000);
});
.wrapper {
width: 1000px;
margin: 0px auto;
}
.wrapper .box {
height: 250px;
width: 18%;
margin-right: 2%;
float: left;
background: green;
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
您可以使用.promise(), .fadeOut()， 递归
$(document).ready(function() {
function repeatAnimation() {
var box = $(".box").fadeOut();
box.each(function(index) {
$(this).delay(index * 800).fadeIn();
});
box.promise().then(function() {
setTimeout(repeatAnimation, 2000)
})
};
repeatAnimation()
});
.wrapper {
width: 1000px;
margin: 0px auto;
}
.wrapper .box {
height: 250px;
width: 18%;
margin-right: 2%;
float: left;
background: green;
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
我想要从左到右然后从右到左动画。
要在完成时反转动画，您可以使用.queue(), .delay(), .promise(), .then(), .toArray(), Array.prototype.reverse(), .animate()动画化opacity的元素。
$(document).ready(function() {
function repeatAndReverseAnimation(boxes) {
return $(boxes).queue("boxes",
$.map(boxes.box, function(box) {
return function(next) {
return $(box).animate({opacity: boxes.toggle[0]})
.delay(boxes.delay[0]).promise().then(next)
}
})).dequeue("boxes").promise("boxes")
.then(function() {
this[0].toggle.reverse();
this[0].box.reverse();
return this.delay(this[0].delay[1], "boxes")
.dequeue("boxes").promise("boxes")
.then($.proxy(repeatAndReverseAnimation, null, this[0]));
});
};
repeatAndReverseAnimation({
box:$(".box").toArray()
, toggle:[1, 0]
, delay:[800, 2000]
});
});
.wrapper {
width: 1000px;
margin: 0px auto;
}
.wrapper .box {
height: 250px;
width: 18%;
margin-right: 2%;
float: left;
background: green;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
