SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strange behavior in javascript animation fading in and out

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

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