javascript - 別のものをクリックしたときにdivスタイルを変更する方法

Question

クリックするとdiv cssスタイルを変更し、クリックするとプライマリステータスに変更します。私はこのコードを使用しましたが、別のdivをクリックすると再変更されるだけです。ここでコードは試しています:

$('.mydiv').click(
function() {

    $(this).stop().animate({
    width:'960px',
    backgroundColor : '#000'
}, 500);
    }, function () {
    $(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);

});

Answer 1

あなたはおそらくtoggle()関数を探しています:

$('.mydiv').toggle(function() {
    $(this).stop().animate({
        width: '960px',
        backgroundColor: '#000'
    }, 500);
}, function() {
    $(this).stop().animate({
        width: '300px',
        backgroundColor: "green"
    }, 300);
});​

そして、色をアニメーション化するにはjQuery UIが必要ですか?

フィドル

編集：

おそらくまだtoggle()関数を探していますが、別の div をクリックしたときに 1 つの div をアニメーション化するには、thisキーワードの使用をやめて、アニメーション化しようとしている div をターゲットにします。

$('#someDiv').toggle(function() {
    $('.mydiv').stop().animate({
        width: '960px',
        backgroundColor: '#000'
    }, 500);
}, function() {
    $('.mydiv').stop().animate({
        width: '300px',
        backgroundColor: "green"
    }, 300);

});​

フィドル

Answer 2

これを試して：

$('.mydiv').click(function() {

    $(this).stop().animate({
        width:'960px',
        backgroundColor : '#000'
    }, 500, function() {
        $(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
    });
});