How do i make this Jquery code shorter and more efficient?

[Anonymous]

$("#staff_member_one").mouseenter(function() {  
    $("#staff_member_info_one").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_one").mouseleave(function() {  
    $("#staff_member_info_one").stop().animate({top:'0px'},200);  
});  

$("#staff_member_two").mouseenter(function() {  
    $("#staff_member_info_two").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_two").mouseleave(function() {  
    $("#staff_member_info_two").stop().animate({top:'0px'},200);  
});  

$("#staff_member_three").mouseenter(function() {  
    $("#staff_member_info_three").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_three").mouseleave(function() {  
    $("#staff_member_info_three").stop().animate({top:'0px'},200);  
});  

$("#staff_member_four").mouseenter(function() {  
    $("#staff_member_info_four").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_four").mouseleave(function() {  
    $("#staff_member_info_four").stop().animate({top:'0px'},200);  
});  

$("#staff_member_five").mouseenter(function() {  
    $("#staff_member_info_five").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_five").mouseleave(function() {  
    $("#staff_member_info_five").stop().animate({top:'0px'},200);  
});  

$("#staff_member_six").mouseenter(function() {  
    $("#staff_member_info_six").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_six").mouseleave(function() {  
    $("#staff_member_info_six").stop().animate({top:'0px'},200);  
});  

$("#staff_member_seven").mouseenter(function() {  
    $("#staff_member_info_seven").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_seven").mouseleave(function() {  
    $("#staff_member_info_seven").stop().animate({top:'0px'},200);  
});  

$("#staff_member_eight").mouseenter(function() {  
    $("#staff_member_info_eight").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_eight").mouseleave(function() {  
    $("#staff_member_info_eight").stop().animate({top:'0px'},200);  
});  

$("#staff_member_nine").mouseenter(function() {  
    $("#staff_member_info_nine").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_nine").mouseleave(function() {  
    $("#staff_member_info_nine").stop().animate({top:'0px'},200);  
});  

$("#staff_member_ten").mouseenter(function() {  
    $("#staff_member_info_ten").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_ten").mouseleave(function() {  
    $("#staff_member_info_ten").stop().animate({top:'0px'},200);  
});  

$("#staff_member_eleven").mouseenter(function() {  
    $("#staff_member_info_eleven").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_eleven").mouseleave(function() {  
    $("#staff_member_info_eleven").stop().animate({top:'0px'},200);  
});  

$("#staff_member_twelve").mouseenter(function() {  
    $("#staff_member_info_twelve").stop().animate({top:'-160px'},200);  
});  
$("#staff_member_twelve").mouseleave(function() {  
    $("#staff_member_info_twelve").stop().animate({top:'0px'},200);  
});

[pixelgrid]

change your html from id to classes like
div class=’staff staff_one’ /div

then with your jQuery try

var number;  
$('.staff').hover(function(){  
number = $(this).attr('class').replace(/staff /,'').split('_')[1];  
$("#staff_member_info_"+number).stop().animate({top:'-160px'},200);  

},function(){  
$("#staff_member_info_"+number).stop().animate({top:'0px'},200);  
});

[Anonymous]

@pixelgrid I would actually preffer leaving it that way than change classes because other elements are dependent of those id’s and it would get confusing having to replace them all. I want to achieve the same functionality here on the “about us” section with the staff divs and hover states. http://reallycoolstuff.net/PROJECTS/Unica/

[pixelgrid]

css would be ok for what you want no javascript needed
just on an image hover detect the hover on the parent and transition the inner div with the texts

in the one you want to do alike you can go with

.staff_member_wrapper:hover .staff_member_info{
top:0;
}

[Anonymous]

@pixegrid i know i could have dont it with css. But css transitions don’t work on IE.

[unasAquila]

Are all the element inside a container and if so could you not use a child selector?

[unasAquila]

Or you could maybe do something like

$(“#staff_member_one, #staff_member_two, #staff_member_three, #staff_member_four”).hover(function() {
$(this).stop().animate({top:’-160px’},200);
}, function(){
$(“#staff_member_one, #staff_member_two, #staff_member_three, #staff_member_four”).stop().animate({top:’0px’},200);
});

[JohnMotylJr]

@Jarolin

You can bind an element with one or more events like:

var sm1 = $('#staff_member_one');

sm1.bind({

mouseenter: function() {

$("#staff_member_info_one").stop().animate({top:'-160px'},200);

},

mouseleave: function() {

$("#staff_member_info_one").stop().animate({top:'0px'},200);

}

});

or $.hover()

var sm1 = $('#staff_member_one');

sm1.hover(

function() {

$("#staff_member_info_one").stop().animate({top:'-160px'},200);

},

function() {

$("#staff_member_info_one").stop().animate({top:'0px'},200);

}

);

ORRR!!! I see how most of your ID’s end with a _one, _two, three etc… how about query through for the element id? Even maybe create an array and test against that. Check out this pen that shows you what i mean. It could save you a lot of lines of code. But im super tired right now so i probably coded some poo for you, lemme know :)

[CrocoDillon]

I would do it like @jamy_za code, maybe wrap it in a `.each( … )` to avoid repetition, but that part is so small it might only be harder to read. I would get the id like this: `this.id`, don’t need the jQuery wrapper for that ;)

[Anonymous]

@jamy_za is there anything i should change in your code for it to work? it’s not working for me right now.

[Alen]

On the first line `id^=”staff_,member_”` there is a comma after `staff_`.

[Anonymous]

@AlenAbdula still not working after removing it.

[unasAquila]

@jamy_za way is definitely the best and here is a working [pen](http://codepen.io/unasAquila/pen/nIwCh)

[Merri]

Why this is being done in jQuery in the first place? It is simple to do this in CSS transitions. Older browsers shouldn’t matter that much for this kind of effect.

If nothing else it would be more efficient.

[Anonymous]

@Merri i would prefer leaving it this way than to use CSS. it’s not that big of a problem to make it shorter anyway.

[Author]

Posts