55502f40dc8b7c769880b10874abc9d0

This jQuery snippet creates an effect that when user clicks on "learn more" of a section it sends off all its siblings in random directions and expands this "learn more" section, and toggles back when clicked once again.

Please let me know if it can be done in a more clever way...
Thanks

var getRandomNo = function(seed){
	
	var minAlowed = 4000;
	var randXresult;
	var randYresult;
	var randMP;
	
	arrayOfRandoms=[]
	
		// random number 1
		var randNo1 = Math.random(seed)*6000;
		if(randNo1< minAlowed){
			randNo1+=1050;}
		
		// random number 2
		var randNo2 = Math.random(seed)*6000;
		if(randNo2< minAlowed){
			randNo2+=590;}
			
		// random x direction
		var mathStartX = Math.random(seed)*6;
		if(mathStartX>3)
		{randXresult="right";}
		else{randXresult="left"}

	  // random Y direction
		var mathStartY = Math.random(seed)*6;
		if(mathStartY>3)
		{randYresult="top";}
		else{randYresult="bottom"}
	  
	  // random - or + 
		var mathStartNP = Math.random(seed)*6;
		if(mathStartNP>3){
			randMP="-";
			}
		else{randMP=" "};
		
		var explodeSpeed = Math.random(seed)*2000;
		if(explodeSpeed<500){explodeSpeed=+500}
	  
	  // Set them to an array taht will return!
		arrayOfRandoms[0] = parseInt(randNo1,10);
		arrayOfRandoms[1] = parseInt(randNo2,10);
		arrayOfRandoms[2] = randXresult;
		arrayOfRandoms[3] = randYresult;
		arrayOfRandoms[4] = randMP;
		// added on Feb 18
		arrayOfRandoms[5] = explodeSpeed
		return arrayOfRandoms;
		}
		
	
		$(".innerColContainer>div").not(":animated").find(".lernMore").toggle(
	function(){
		$(this).html("Go Back").parent().parent().addClass("moreOpen").siblings().each(function(i){
																								
			// very big improvment here, calling getRandomNo() once per element instead of 4 times per el. 
			var temRandArray = getRandomNo(i)
			var Xrandom =temRandArray[2];								   
			var Yrandom =temRandArray[3];
			var readRandNo1 = temRandArray[4] +temRandArray[0];
			var readRandNo2 = temRandArray[4] +temRandArray[1];
			//added on feb 18
			var eachSpeed = temRandArray[5]		
		var props = {};
			props[Xrandom]=readRandNo1;
			props[Yrandom]=readRandNo2;
			

		$(this).animate(props, eachSpeed);
		    })
			.end()
			.css({"position":"absolute",
				 top:0,
				 left:0})
			.animate({"width":"465px"},eachSpeed)
			.find(".more")
			.fadeIn(eachSpeed);										 
	},
	function(){
		$(this)
		.html("Learn more")
		.parent()
		.parent()
		.removeClass("moreOpen")
		.siblings()
		.css("position","relative")
		.animate({
				 left:"0",
				 right:"0",
				 top:"0",
				 bottom:"0", 
				 opacity:1},500, 
				 function(){
					$(".innerColContainer div")
					.removeAttr("style");																																				
					})
		.end()
		.css("position","relative")
		.animate({"width":"220px"},500)
		.find(".more").fadeOut();
	})

Refactorings

No refactoring yet !

34db50b7ce2e115afadf5a765b950739

Thomas Salvador

February 21, 2010, February 21, 2010 21:28, permalink

1 rating. Login to rate!

hi,

i suggest to change the way you get the random numbers. Instead of fetching the number and changing it, if too low, just get a smaller random number and add the minimum in every case.

for example
instead: rand = Math.random(seed)*6000; if (rand < minAlowed) rand += 1050;
[range is: 1050 .. 6000]
say: rand = 1050 + Match.random(seed)*(6000-1050);
[range is: 1050 .. 6000]

in addition you may want to use the conditional operator "?", to make it more compact.

attached an updated getRandomNo(). i do not use constants here for clarity.

regards,
thomas.

var getRandomNo = function(seed){
	
  var minAlowed = 4000;
  var randXresult;
  var randYresult;
  var randMP;
	
  arrayOfRandoms=[];
  
  arrayOfRandomd[0] = parseInt(1050 + Match.random(seed)*(6000-1050), 10);
  arrayOfRandoms[1] = parseInt(1050 + Match.random(seed)*(6000-1050), 10);
  arrayOfRandoms[2] = (Math.random(seed)*6 > 3 ? "right" : "left");
  arrayOfRandoms[3] = (Math.random(seed)*6 > 3 ? "top" : "bottom");
  arrayOfRandoms[4] = (Math.random(seed)*6 > 3 ? "-" : " ");
  arrayOfRandoms[5] = 500 + Match.random(seed)*(2000-500);
	
  return arrayOfRandoms;
}
34db50b7ce2e115afadf5a765b950739

Thomas Salvador

February 21, 2010, February 21, 2010 21:33, permalink

No rating. Login to rate!

argh, the vars line 3 to 6 are no longer needed, of course. i missed to cancel them.
--thomas.

Your refactoring





Format Copy from initial code

or Cancel