仅使用 jquery 逐渐更改 div 颜色答案

【问题标题】：Change div colour gradually using jquery ONLY仅使用 jquery 逐渐更改 div 颜色
【发布时间】：2013-11-15 06:46:27
【问题描述】：

下面是我的 HTML-CSS-Jquery 代码。问题：当我点击背景按钮时，颜色立即从橙色变为绿色。我想要的是，当我点击背景按钮时，div 的背景颜色必须慢慢改变颜色。请注意，我只被允许使用 Jquery。不得使用其他插件。

代码：

<!DOCTYPE html>
<html>
<head>

<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;

}

</style>


<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
    $("#width").click(function(){
    $("#box").animate(
            {"width": "300px"},
            "slow");        

  });
  $("#height").click(function(){
    $("#box").animate(
            {"height": "300px"},
            "slow");        

  });
  $("#background").click(function(){
    $("#box").css("background-color","green");
  });


});
</script>
</head>
<body>

<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence.  </p>
</div>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这样的，FIDDLE

      $("#background").click(function(){
          $("#box").css({
                transition : 'background-color 1s ease-in-out',
                "background-color": "green"
            });
      });

【讨论】：

【解决方案2】：

你也可以通过 css 来做 在 CSS 中

.slowbackground {
    background-color: green;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
   background-color: D3E1FA;
}

在js中

$("#background").click(function(){

    if(  $("#box").hasClass("slowbackground")) { 
      $("#box").addClass("slowbackground");
      }

});

【讨论】：