Question

I have 5 list items, when one is clicked the only method I know is to animate all the elements then reanimate the selected element to the new width. Can anyone advise me how I can cut down this process so only the current active item gets animated and the class removed and then the new item gets animated and the active class added?

JS

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    if( !$(this).hasClass('active') ){
        test_li.animate({ width: small }, 300).removeClass('active'); //animates every single li every time
        $(this).animate({ width: large }, 300).addClass('active');
    } 

});​

Fiddle Here: http://jsfiddle.net/TSNtu/1/

Answer 1

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    // if clicked element is active itself then do nothing
    if ($(this).hasClass('active')) return;

    // remove active from others
    $('.active', test).animate({
        width: small
    }, 300).removeClass('active');
    // animate the clicked one
    $(this).animate({
        width: large
    }, 300).addClass('active');
});

DEMO

With a single chain

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    // if clicked element is active itself then do nothing
    if ($(this).hasClass('active')) return;

    $(this) // clicked li
        .animate({
            width: large
        }, 300)
        .addClass('active')
        .siblings('.active') // other li
        .animate({
            width: small
        }, 300)
        .removeClass('active');
});

DEMO