Question

我做了一些litle 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

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

$(document).ready(function() {
  var bool = true;
  $('#div1').click(function() {
    if (bool == true) {
      $('#div1').css({
        "background": "blue"
      });
      bool = false;
    } else {
      $('#div1').css({
        "background": "red"
      });
      bool = true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  Div Content
</div>

为div1保留相同的CSS，它会给你想要的动画。

Answer 2

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

<强> Jquery的：

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

<强> CSS

#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;
}

此处示例：Click here

Answer 3

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

我已经在函数中添加了一个if子句，现在检查div是否为全尺寸，以确定哪个应该是动画的。在那之后，我让他们切换位置以进行＆＃34; go-round＆＃34;可能的：

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;}

希望这会有所帮助!!

Answer 4

最简单的方式----

http://jsfiddle.net/phmxbf5k/68/

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

.changeBackground{
   background: blue;
}

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

4 个答案: