jQuery如何通过单击快速更改div上的颜色

我制作了一些litle jQuery小脚本，通过动画{height:0px}，1000单击即可更改颜色。但它只需点击一次即可工作。如何在每次点击时改变颜色

HTML

jQuery

---

这里：您可以测试这个小脚本

我刚刚修改了您的代码，您不必使用两个div，您可以这样做：

$document.readyfunction{ var bool=真； $'div1'。单击函数{ 如果bool==true{ $'div1'.css{ 背景：蓝色 }; 布尔=假； }否则{ $'div1'.css{ 背景：红色 }; 布尔=真； } }; }; Div内容

---

我在div中添加了一些CSS和其他jquery：

Jquery：

CSS

---

这里的示例：

您可以这样做：

我在函数中添加了一个if子句，现在检查wich div是否为全尺寸，以确定哪个应该设置动画。 在那之后，我让他们交换位置，使围棋成为可能：

function toggleAnimation() {
    var active_div, hidden_div;
    if ( $('#div1').css("height") == "200px" ) {
    active_div = "#div1"; hidden_div = "#div2"; }
    else {active_div = "#div2"; hidden_div = "#div1";}

    $(active_div).animate({"height":"0px"});
    $(hidden_div).css({"height":"200px"}); 
    $(active_div).insertAfter(hidden_div);

};


$(document).ready(function(){
    $('.wrap').click(function(){
        if ( ($("#div1, #div2").is(':animated'))==false ) {
        toggleAnimation()
        }
    })
});

还必须修改HTML：

<div class="wrap">
<div id="div1"></div>
<div id="div2"></div>
</div>

希望这有帮助

最简单的方法-

---

您希望通过第二次单击实现什么？我的意思是，你想让这个div在动画之后再次变成蓝色？例如，将背景颜色更改为蓝色，但为什么在快速单击框消失后？因为你是在动画完成之前单击的！我已经添加了一个检查，如果这个div的之一是动画：谢谢！可以在这个脚本中设置这样的动画吗？你发布的站点上的函数的JS大约有600行：当然可以，但是需要很多分叉-你必须检查，哪个父对象被单击，并相应地设置多个子对象的动画。我想我要花整个下午的时间来做这个程序，所以我不能免费做那个，对不起。。。

$(document).ready(function(){
        $('#div1').click(function (){
                $('#div2').animate({"height":"0px"});
              $('#div1').css({"height":"200px"});
           });
        });

$('#div').click(function (){
    var div1Class = $('#div div').attr('id');
    if(div1Class == 'div1'){
        $('#div div').animate().attr('id', 'div2');
    }
    else{
        $('#div div').attr('id', 'div1');
    }
});

#div1 {
 width:200px;
 height:200px;
background:red;
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}
#div2 {
 width:200px;
 height:200px;
 background:blue;
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}

function toggleAnimation() {
    var active_div, hidden_div;
    if ( $('#div1').css("height") == "200px" ) {
    active_div = "#div1"; hidden_div = "#div2"; }
    else {active_div = "#div2"; hidden_div = "#div1";}

    $(active_div).animate({"height":"0px"});
    $(hidden_div).css({"height":"200px"}); 
    $(active_div).insertAfter(hidden_div);

};


$(document).ready(function(){
    $('.wrap').click(function(){
        if ( ($("#div1, #div2").is(':animated'))==false ) {
        toggleAnimation()
        }
    })
});

<div class="wrap">
<div id="div1"></div>
<div id="div2"></div>
</div>

.wrap {position:relative;}
.wrap div {position:absolute;top:0;left:0;}

$(document).ready(function(){        
    $('#div1').click(function (){  
        $('#div2').toggleClass("changeBackground");
    });
});

.changeBackground{
   background: blue;
}