Strange behavior in javascript animation fading in and out

JavaScript
1

Don’t know why javascript behavior acts strange - the correct paragraph fades in right away BUT then back out again, and the wrong one fades in and then the wrong one keeps fading in no matter if I click forward or backward button. This only happens when I call the rotate() function and then call a click event on $(‘#group1 .slidernav a’). But notice that in rotate() it calls fadeImg() and then rotateSwitch(). Is it calling the latter two functions BEFORE it triggers the click event on the link, regardless of how fast I click the link? That is, in javascript, does it always COMPLETE the execution of a function before it responds to another event like a click? If that’s the case, is that the reason for strange behavior:


<script>

//the rotate() function
rotate = function(){
	
	clearInterval(play);
	
    var triggerID = $active.attr("rel") - 1; 
    var image_reelPosition = triggerID * imageWidth; 

    $(".paging a").removeClass('active');  

    $active.addClass('active');  
	
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

 
clearInterval(playFade); 

switch(triggerID){
	case 0:
		$next = $("#group1 img:first");
		$nextgraph = $("#group1 p:first");
		$currLink = $("#group1 div.slidernav a:first");
		break;
	case 1:
		$next = $("#group2 img:first");
		$nextgraph = $("#group2 p:first");
		$currLink = $("#group2 div.slidernav a:first");
		break;
	case 2:
		$next = $("#group3 img:first");
		$nextgraph = $("#group3 p:first");
		$currLink = $("#group3 div.slidernav a:first");
		break;
	case 3:
		$next = $("#group4 img:first");
		$nextgraph = $("#group4 p:first");
		$currLink = $("#group4 div.slidernav a:first");
		break;
}

if($next.length === 0){
	$next = $(".image_reel img:first");  
} 

if($nextgraph.length === 0){
	$nextgraph = $(".image_reel p:first");
}

fadeImg();  

rotateSwitch();  

};

//fadeImg() function
fadeImg = function(){
	try {
		$(".image_reel img").removeClass('active');	
		$next.addClass('active'); 
	}
	catch (e) {
		console.log(e.message);
		return false;
	}
	
	$(".image_reel p").removeClass('active');
	$nextgraph.addClass('active');	
	$('.slidernav a').removeClass('active');
	$currLink.addClass('active');
	
	$(".image_reel img").animate({  
        opacity: 0
    }, 500 );

	$next.animate({    
        opacity: 1
    }, 500 );

	var triggerID = $active.attr("rel") - 1;  
    var image_reelPosition = triggerID * imageWidth;

	$(".image_reel p").animate({
		opacity: 0,
		left: image_reelPosition + 500  
	}, 500 );
	
	$nextgraph.animate({
		opacity: 1,
		left: image_reelPosition
	}, 800 );

};

//the rotateSwitch() function
rotateSwitch = function(){
    play = setInterval(function(){ 
        $active = $('.paging a.active').next();  
        if ( $active.length === 0) { 
            $active = $('.paging a:first');  
        }
        rotate();  
    }, 15000);  
	playFade = setInterval(function(){  
		$active = $('.paging a.active');
		$currLink = $('.slidernav a.active').next();
	
		$next = $(".image_reel img.active").parent().next().find('img'); 
		$nextgraph = $(".image_reel p.active").next(); 
		
		if($nextgraph[0].nodeName != "P"){  
			var nextgraphparent = $(".image_reel p.active").parent().attr("id");
			$nextgraph = $("#" + nextgraphparent + " p:first");
		}
		
		if($next.length === 0){
			var nextparent = $(".image_reel img.active").parent().parent().attr("id");
			$next = $("#" + nextparent + " img:first");
			$currLink = $("#" + nextparent +  " .slidernav a:first");  
		}		
		fadeImg();
	}, 5000);
};

rotateSwitch();

//clicking this link calls rotate() - THIS IS WHEN PROBLEM OCCURS - YOU CLICK TO SECOND GROUP BUT THEN WHEN YOU RETURN TO FIRST GROUP, AND CLICK ONE OF ITS SUBLINKS (e.g. $('group1 .slidernav a'), then that's when the weird behavior occurs.)
$(".paging a").click(function() {
    $active = $(this);  
     clearInterval(play);  
	clearInterval(playFade);    
    rotate();  
    return false;  
});

//AFTER clicking $('.paging a') link and then clicking the below link, that's when strange behavior occurs:
$('#group1 .slidernav a').bind('click', function(){
	var triggerID = $active.attr("rel") - 1;  
    var image_reelPosition = triggerID * imageWidth;

	try {
		$nextGraph = ($(this).attr('id')=='rightControl') ? $nextGraph.next() : $nextGraph.prev();
	}
	catch (e) {
		console.log(e.message);
		$nextGraph = $('#group1 p:first').next();
	}
	
	manageControls($nextGraph);
	$(".image_reel p").animate({
		opacity: 0,
		left: image_reelPosition + 500
	}, 500 );
	
	$nextGraph.animate({
		opacity: 1,
		left: image_reelPosition
	}, 800 );
	
	clearInterval(playFade);
	clearInterval(play);
		
	fadeImg();
	rotateSwitch();
});

</script>

This isn’t all the javascript in the code, but I believe this is what’s relevant tot hte issue. THe issue occurs either in the click event or the fadeImg() function.

2

It will be a lot easier for us to help if we had a test page to experiment with. Are you able to reduce your current page to a minimal version that still demonstrates the issue?