Call function at the end of setInterval
I want to set opacity back to 1.
setInterval(function() {
$('li:first')
.animate({ opacity: "0" }, 1000, function() { $(this).hide(); })
.next().show()
.end().appendTo('ul');
}, 5000);
I can do all the steps after the animation like below. It does exactly what I want it to do, but it's a really bad idea.
setInterval(function() {
$('li:first')
.animate({ opacity: "0" }, 1000, function() {
$(this).hide();
$(this).next().show();
$(this).appendTo("ul");
$(this).css("opacity", "1")})
}, 5000);
+3
source to share
1 answer
How about using CSS transitions and class toggling (with jQuery) to animate hiding and showing elements?
foo{transition: opacity 1s}
.hide{opacity: 0; visibility: hidden;}
.show{opacity: 1; visibility: visible;}
Now that jQuery just toggles the hide and show classes
$(foo).removeClass("show").addClass("hide")
$(foo).removeClass("hide").addClass("show")
Or using vanilla JavaScript (less compatible)
foo.classList.toggle("hide")
foo.classList.toggle("show")
-1
source to share