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 时为一个 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);
    });
});