jQuery Reduce ! [Solved]

[attila2452]

how do i reduce this.im new to JQ

$(document).ready(function(){//Home	$("a.home").mouseover(function(){	$(this).animate({height:60},"fast");	});	$("a.home").mouseout(function(){	$(this).animate({height:35},"slow");	});	$("a.home").click(function(){	$(this).animate({height:35},"slow");	  $(this).fadeOut(1000);	  $(this).fadeIn(1000);	});	//About	$("a.about").mouseover(function(){	$(this).animate({height:60},"fast");	});	$("a.about").mouseout(function(){	$(this).animate({height:35},"slow");	});		$("a.about").click(function(){	$(this).animate({height:35},"slow");	  $(this).fadeOut(1000);	  $(this).fadeIn(1000);	});  //Media	$("a.media").mouseover(function(){	$(this).animate({height:60},"fast");	});		$("a.media").mouseout(function(){	$(this).animate({height:35},"slow");	});	$("a.media").click(function(){	$(this).animate({height:35},"slow");	  $(this).fadeOut(1000);	  $(this).fadeIn(1000);	});	//Links	$("a.links").mouseover(function(){	$(this).animate({height:60},"fast");	});	$("a.links").mouseout(function(){	$(this).animate({height:35},"slow");	});		$("a.links").click(function(){	$(this).animate({height:35},"slow");	  $(this).fadeOut(1000);	  $(this).fadeIn(1000);	});	//Contact	$("a.contact").mouseover(function(){	$(this).animate({height:60},"fast");	});		$("a.contact").mouseout(function(){	$(this).animate({height:35},"slow");	});	$("a.contact").click(function(){	$(this).animate({height:35},"slow");	  $(this).fadeOut(1000);	  $(this).fadeIn(1000);});

is there i way I have do it in one of those? like use the parent or child or something? someone please help!

[skaterdav85]

you could start by chaining the different jquery methods to ONE jquery selection. It improve performance because it will only create the jquery object once based on your selector. Right now you are creating a new jquery object for each method (mouseover, mouseout, click). Look up jquery chaining

[attila2452]

you could start by chaining the different jquery methods to ONE jquery selection. It improve performance because it will only create the jquery object once based on your selector. Right now you are creating a new jquery object for each method (mouseover, mouseout, click). Look up jquery chaining

how would i start by doing this. (i just started using jQuery 2 days ago)

[skaterdav85]

actually, im not sure if you can bind multiple events to one jquery selection through chaining. By chaining i mean this:

$('#id').hide().fadeIn(300);

Notice how i called the hide method and the fadeIn method to the one jquery selection. But I am not sure if you can do that like:

$('#id').click().mouseover()

But you could improve your script by storing your jquery selection in a variable and then binding events to that variable instead of creating a new jquery object and re-selecting all those elements for each event you're going to bind to it. So you'd do something like this:

var myObj = $('#id');myObj.click(function(){});myObj.mouseover(function(){})

[attila2452]

actually, im not sure if you can bind multiple events to one jquery selection through chaining. By chaining i mean this:

$('#id').hide().fadeIn(300);

Notice how i called the hide method and the fadeIn method to the one jquery selection. But I am not sure if you can do that like:

$('#id').click().mouseover()

But you could improve your script by storing your jquery selection in a variable and then binding events to that variable instead of creating a new jquery object and re-selecting all those elements for each event you're going to bind to it. So you'd do something like this:

var myObj = $('#id');myObj.click(function(){});myObj.mouseover(function(){})

How would i incorperate this in with mine? do you wanna write it for me then ill learn from it?

[attila2452]

How would i incorperate this in with mine? do you wanna write it for me then ill learn from it?

i got it with this:

$(document).ready(function(){		var myObj = $('#nav ul li a');	myObj.click(function(){		$(this).hide().fadeOut(1000);		$(this).hide().fadeIn(1000);	});	myObj.mouseover(function(){		$(this).animate({height:70},100);		$(this).animate({height:55},120);		$(this).animate({height:60},140);	})	myObj.mouseout(function(){		$(this).animate({height:35},"fast");	})});

Thank you soo much!