Struggling to grasp the basics of web design, particularly HTML, CSS, and JS/JQuery. Encountering obstacles that seem insurmountable.
I'm attempting to rotate a few divs on my page with limited success. My makeshift solution involves toggling between hidden divs, but it's far from elegant. Strangely enough, it only works twice before hitting a roadblock.
function moveSide(){
var intervalId;
var childCount = 2;
var preLast = childCount + 2;
var newLast = childCount + 3;
intervalId = setInterval(function () {
$(".column:nth-of-type(" + childCount + ")").toggle("slide", function(){
$(".column:nth-of-type(" + preLast + ")").removeClass("last").delay(1, function(){
$(".column:nth-of-type(" + newLast + ")").addClass("last").delay(1).toggle("slide", function(){
childCount++;
preLast = childCount + 2;
newLast = childCount + 3;
//alert(childCount);
});
});
});
},5000);
}
The nth-of-type selector may not be the best choice, but it helps me target specific divs. childCount determines which div is toggled first, preLast identifies the last displayed div for relevant class removal, and newLast assigns properties to the next visible div.
The alert cycle completes two rotations before faltering on the third. Any insights into where I might be going wrong?