jQuery如何通过点击快速改变div的颜色

Question

我制作了一些 jQuery 小脚本，它们在点击时改变颜色并带有动画 ({"height":"0px"},1000)。但它只适用于一次点击。如何让每次点击都改变颜色？

HTML

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

CSS

#div1 {
width:200px;
height:200px;
background:red;
}

#div2 {
width:200px;
height:200px;
background:blue;
}

jQuery

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

HERE :您可以测试这个小脚本 http://jsfiddle.net/phmxbf5k/

Answer 1

你可以这样做: http://jsfiddle.net/gmf9kbs2/2/

我在该函数中添加了一个 if 子句，检查哪个 div 现在处于完整大小以确定应该为哪个 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>

...并添加了一些 CSS:

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

希望这对您有所帮助!