Link to home
Start Free TrialLog in
Avatar of Cybervanes
Cybervanes

asked on

jQuery Animate a set of 10 elemets each starting at diffrent times.

i'm just curious if there is a way to optimize this code that animates a list of 10 results at a time.
Is there a way to det up some type of timed loop or something like that?
function GetNextTen(whatToDo,currentLimit){
	currentLimitSplit = currentLimit.split(',');
	currentLimitSplit[0] = parseFloat(currentLimitSplit[0])+10;
	currentLimit = currentLimitSplit.join(',');
	var value = 'WhatToDo='+whatToDo+'&limit='+currentLimit;
	               $('#event-1').animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-2').delay(50).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   ); 
				   $('#event-3').delay(100).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-4').delay(150).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-5').delay(200).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   ); 
				   $('#event-6').delay(250).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-7').delay(300).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-8').delay(350).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   ); 
				   $('#event-9').delay(400).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
				   $('#event-10').delay(450).animate({"left": "-850px", "opacity": ".1"}, 
				   300, // how fast we are animating
				   'easeInExpo' // the type of easing
				   );
		 
	$.ajax({
		 type: 'GET',
		 url:  'includes/HomePageEventListings.php?'+value,
		 success: function(msg){ 
		 //$("#JobInformation").html('');		 
		// $("#findTicketsListCont").hide();
		 			
					
		$("#findTicketsListCont").delay(600).html(msg)
		 $('.shown').addClass('outOfSight');
		 

				   $('#event-1').animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-2').delay(50).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   ); 
				   $('#event-3').delay(100).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-4').delay(150).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-5').delay(200).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   ); 
				   $('#event-6').delay(250).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-7').delay(300).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-8').delay(350).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   ); 
				   $('#event-9').delay(400).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
				   $('#event-10').delay(450).animate({"left": "-=850px", "opacity": "1"}, 
				   600, // how fast we are animating
				   'easeInOutExpo' // the type of easing
				   );
		}  
	});
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of nap0leon
nap0leon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial