Grow your CSS skills. Land your dream job.

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

  • # May 25, 2013 at 8:36 pm
    $("#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);  
    });
    
    # May 25, 2013 at 8:44 pm

    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);  
    });
    
    # May 25, 2013 at 8:55 pm

    @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/

    # May 25, 2013 at 9:02 pm

    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;
    }

    # May 25, 2013 at 9:15 pm

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

    # May 25, 2013 at 9:24 pm

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

    # May 25, 2013 at 9:54 pm

    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);
    });

    # May 26, 2013 at 12:07 am

    @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 :)

    # May 26, 2013 at 2:04 am

    $(‘[id^="staff_,member_"]‘).hover(function(){ // target element that has id that begins with
    var el_id = $(this).attr(‘id’), // get the id value
    num = el_id.substring(13); // strip all text but the number from the id

    $(‘#staff_member_info_’ + num).stop().animate({top:’-160px’},200);
    }, function(){
    var el_id = $(this).attr(‘id’),
    num = el_id.substring(13);

    $(‘#staff_member_info_’ + num).stop().animate({top:’-0px’},200);
    });

    # May 26, 2013 at 9:35 am

    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 ;)

    # May 26, 2013 at 10:51 am

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

    # May 26, 2013 at 11:45 am

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

    # May 26, 2013 at 12:34 pm

    @AlenAbdula still not working after removing it.

    # May 26, 2013 at 1:15 pm

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

    # May 26, 2013 at 1:35 pm

    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.

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".