1

5 つのリスト項目があります。1 つをクリックすると、すべての要素をアニメーション化してから、選択した要素を新しい幅に再アニメーション化する方法しかわかりません。現在アクティブなアイテムのみがアニメーション化され、クラスが削除され、新しいアイテムがアニメーション化され、アクティブなクラスが追加されるように、このプロセスを削減する方法を教えてもらえますか?

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

});​

ここでフィドル: http://jsfiddle.net/TSNtu/1/

4

1 に答える 1

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

デモ

シングルチェーン付き

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

デモ

于 2012-06-12T16:04:21.873 に答える