单击另一个时如何更改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动画颜色吗？

FIDDLE

修改

您可能仍在寻找toggle()功能，但要在点击其他div时设置一个div动画，请停止使用this关键字并定位您要设置动画的div：< / p>

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

});​

FIDDLE

Answer 2

试试这个：

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

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