Jump to content

javascript: two functions with same content produce different results when called at different places


johnmerlino
 Share

Recommended Posts

Hey all,I might not be familiar with a javascript concept, but basically I have two functions which do the very same thing. However, when one is called, the resulting behavior is correct, but when I remove it and call another, the resulting behavior is incorrect, even though both functions that I call perform the same action! The only difference is one function is declared before where I call it, and the other function is declared after, where I call it. This works:

fadeImg = function(){ 		$(".image_reel p").removeClass('active');	$nextgraph.addClass('active');			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 );};rotateSwitch = function(){	play = setInterval(function(){  		$active = $('.paging a.active').next();  		if ( $active.length === 0) {  			$active = $('.paging a:first');  		}		rotate();   	}, 15000);  	playFade = setInterval(function(){  			$nextgraph = $(".image_reel p.active").next(); 				if($nextgraph[0].nodeName != "P"){ //REMEMBER THAT NEXT FINDS NEXT SIBLING AND P HAD A NEXT SIBLING OF A DIV			var nextgraphparent = $(".image_reel p.active").parent().attr("id");			$nextgraph = $("#" + nextgraphparent + " p:first");		}				fadeImg();	}, 5000);};rotateSwitch();$('#group1 .slidernav a').bind('click', function(){		(typeof $nextGraph === "undefined") ? $nextGraph = $('#group1 p:first').next() : $nextGraph = (($(this).attr('id')=='rightControl') ? $nextGraph.next() : $nextGraph.prev());		manageControls($nextGraph);	clearInterval(playFade);	clearInterval(play);	fadeTry(); //fadeTry() is called here	rotateSwitch();	});fadeTry = function(){	var triggerID = $active.attr("rel") - 1;  	var image_reelPosition = triggerID * imageWidth;	$('#group1 p').removeClass('active');	$nextGraph.addClass('active');		$(".image_reel p").animate({		opacity: 0,		left: image_reelPosition + 500 	}, 500 ); 	$nextGraph.animate({		opacity: 1,		left: image_reelPosition	}, 800 );	};

This doesn't:

fadeImg = function(){ 		$(".image_reel p").removeClass('active');	$nextgraph.addClass('active');			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 );};rotateSwitch = function(){	play = setInterval(function(){  		$active = $('.paging a.active').next();  		if ( $active.length === 0) {  			$active = $('.paging a:first');  		}		rotate();   	}, 15000);  	playFade = setInterval(function(){  			$nextgraph = $(".image_reel p.active").next(); 				if($nextgraph[0].nodeName != "P"){ 			var nextgraphparent = $(".image_reel p.active").parent().attr("id");			$nextgraph = $("#" + nextgraphparent + " p:first");		}				fadeImg();	}, 5000);};rotateSwitch();$('#group1 .slidernav a').bind('click', function(){		(typeof $nextGraph === "undefined") ? $nextGraph = $('#group1 p:first').next() : $nextGraph = (($(this).attr('id')=='rightControl') ? $nextGraph.next() : $nextGraph.prev());		manageControls($nextGraph);	clearInterval(playFade);	clearInterval(play);	fadeImg(); //fadeImg() is called here	rotateSwitch();	});

The only difference between the two is when the link is clicked, one calls fadeTry() and the other calls fadeImg(). When calling fadeTry(), expected behavior occurs - it fades to the next or previous paragraph. When fadeImg() is called, it doesn't fade to next or previous. It fades the same paragraph no matter how many times you click the link. Heres' the html, just in case it's necessary:

<div class="window">														<div class="image_reel"> 															<div id="group1">																																<p class="first">A</p>																<p class="second">B</p>																<p class="third">C</p>																																<div class="slidernav">																																		<a href='#' class='control' id='leftControl'>Back</a>																	<a href='#' class='control' id='rightControl'>Forward</a> 																																			 																</div>															</div></div>

Thanks for any response.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...