Issue
I want to loop the class name 'move' over all the divs, so if the first div has the class name 'move', i want to remove it and then add it to the next element in every three seconds
$(document).ready(function () {
setInterval(swapUsp, 3000);
function swapUsp() {
var active = $('#infobarContainer .uspTag');
var next = ($('#infobarContainer .uspTag').next().length > 0) ? $('#infobarContainer .uspTag').next() : $('#infobarContainer .uspTag:first');
if (active.hasClass('move')) {
active.removeClass('move')
next.addClass('move');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="infobarContainer">
<div class="uspTag tagline tagline2 move">
USP 1
</div>
<div class="uspTag tagline tagline2">
USP 2
</div>
<div class="uspTag tagline tagline2">
USP 3
</div>
<div class="uspTag tagline tagline2">
USP 4
</div>
</div>
Solution
const divs=[...document.querySelectorAll(".tagline2")];
divs.i=0;
setInterval(function(){
divs[divs.i++].classList.remove("move");
divs[divs.i=divs.i%divs.length].classList.add("move")
},500);
.move {background-color:red}
<div class="infobarContainer">
<div class="uspTag tagline tagline2 move">
USP 1
</div>
<div class="uspTag tagline tagline2">
USP 2
</div>
<div class="uspTag tagline tagline2">
USP 3
</div>
<div class="uspTag tagline tagline2">
USP 4
</div>
</div>
Answered By - Carsten Massmann
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.