www.webdeveloper.com
Results 1 to 1 of 1

Thread: strange behavior in javascript animation fading in and out

Threaded View

  1. #1
    Join Date
    Apr 2010
    Posts
    26

    strange behavior in javascript animation fading in and out

    Hey all,

    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:

    Code:
    <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.
    Last edited by JohnMerlino; 09-01-2010 at 10:40 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles