Grow your CSS skills. Land your dream job.

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

  • # May 26, 2013 at 1:53 pm

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

    # May 26, 2013 at 2:45 pm

    @Jarolin, @jamy_za’s way of writing that code is EXACTLY what you need.

    @Merri, i know, all it takes are a couple classes and some transitions and boom goes the dynamite. It’s just the way the OP wants it.

    # May 26, 2013 at 4:11 pm

    Thank you for the pen. It definitely works perfectly. Thanks.

    # May 26, 2013 at 4:42 pm

    Actually when i add a new member card the animation doesn’t happen to that newly added member div. What must i do when adding or when removing member divs?

    # May 26, 2013 at 4:52 pm

    @Jarolin, are they dynamic or load with ajax?

    # May 26, 2013 at 4:54 pm

    @JohnMotyLJr dynamic

    # May 26, 2013 at 4:58 pm

    As you can see [Here](http://codepen.io/unasAquila/pen/zbkgx) it should not matter how many you add.

    # May 26, 2013 at 5:02 pm

    @unasAquila Here i added one more which is the last one and see what happens http://reallycoolstuff.net/PROJECTS/Unica/#

    # May 26, 2013 at 5:06 pm

    Its getting the same id as the previous one.

    # May 26, 2013 at 5:07 pm

    @unasAquila *FACEPALM!. Feel like an idiot.

    # May 26, 2013 at 5:19 pm

    How about instead listening to the parent object?

    $(‘#team_members_group’).on(‘mouseenter mouseleave’, ‘[id^="staff_member_"]‘, function(e) {
    var topValue = (e.type === ‘mouseenter’) ? ‘-160px’ : ’0px’;
    $(
    ‘#’ + this.id.replace(‘staff_member_’, ‘staff_member_info_’)
    ).stop().animate({top: topValue}, 200);
    });

    Can add or remove on the fly and things will always work.

    # May 27, 2013 at 4:18 am

    @CrocoDillon You are quite right and it is goo to understand why it is a more efficient way of getting the attribute value, however, if you work in a group code consistency is important and the way one codes may change slightly compared to the way one codes personally. So on work projects I’d use `$(this).attr(‘id’)` without exception.

    # May 27, 2013 at 3:45 pm

    @jamy_za

    I understand what you’re saying, and in general, I agree; especially if it is a matter of project coding standards or conventions in a team.

    However, conventions and understandability don’t need to (and shouldn’t) stand in the way of efficiency. In this case, `this` is already a DOM element. Creating a new jQuery object is expensive and unnecessary. Two preferable alternatives:

    … change the convention. Conventions should be about coding style, and stay away from specific logic. Yes, if you’re doing something, it’s nice for everyone to do it the same way. That doesn’t mean you should be doing anything you wouldn’t have any reason to do otherwise.

    … comment your code. Then you know *for sure* everyone will understand what you’re doing.

    /* same result as $( this ).attr( ‘id’ ); faster */
    var el_id = this.id;

    # May 28, 2013 at 12:59 pm

    “However, conventions and understandability don’t need to (and shouldn’t) stand in the way of efficiency.”

    @traq company politics may not always allow that statement to be true.

    But I do completely understand and agree with what you’re saying. People should definitely develop things in the most efficient way possible, unless that micro-optimisation destroys readability and convention.

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.

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