For looping to reduce code
Hey I'm fairly new with JQuery but wondered if someone could help me out so I can understand how to do the following in the future.
I have 5 buttons all using the same code:
-
$(".but1").mouseenter(function(){
$(".but1>.launch").animate({ left: "10px"}, 250 );
});
$(".but1").mouseleave(function(){
$(".but1>.launch").animate({ left: "0px"}, 250 );
});
$(".but2").mouseenter(function(){
$(".but2>.launch").animate({ left: "10px"}, 250 );
});
$(".but2").mouseleave(function(){
$(".but2>.launch").animate({ left: "0px"}, 250 );
});
$(".but3").mouseenter(function(){
$(".but3>.launch").animate({ left: "10px"}, 250 );
});
$(".but3").mouseleave(function(){
$(".but3>.launch").animate({ left: "0px"}, 250 );
});
$(".but4").mouseenter(function(){
$(".but4>.launch").animate({ left: "10px"}, 250 );
});
$(".but4").mouseleave(function(){
$(".but4>.launch").animate({ left: "0px"}, 250 );
});
$(".but5").mouseenter(function(){
$(".but5>.launch").animate({ left: "10px"}, 250 );
});
$(".but5").mouseleave(function(){
$(".but5>.launch").animate({ left: "0px"}, 250 );
});
Is there a way to do this in fewer lines of code?
Any help is greatly appreciated.
Al