仅使用jquery逐渐更改div颜色

Question

Below is my HTML-CSS-Jquery code. 下面是我的HTML-CSS-Jquery代码。 Problem: When I click on the background button, The Colour changes from Orange to Green instantly. 问题：当我点击背景按钮时，颜色会立即从橙色变为绿色。 What I want is, when I click on the Background button the background color of the div must change colour slowly. 我想要的是，当我点击背景按钮时，div的背景颜色必须慢慢改变颜色。 Please note that I am only permitted to use Jquery. 请注意，我只允许使用Jquery。 No Other plugins may be used. 没有其他插件可以使用。

Code: 码：

<!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>

Answer 1

try something like this, FIDDLE 试试这样的事， FIDDLE

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

Answer 2

you can do also by css In CSS 你也可以用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;
}

in js 在js

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

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

});

仅使用jquery逐渐更改div颜色

问题描述

2 个解决方案

解决方案1
12 已采纳 2013-11-15 07:04:12

解决方案2
0 2013-11-15 06:51:33

仅使用jquery逐渐更改div颜色

问题描述

2 个解决方案

解决方案1 12 已采纳 2013-11-15 07:04:12

解决方案2 0 2013-11-15 06:51:33

解决方案1
12 已采纳 2013-11-15 07:04:12

解决方案2
0 2013-11-15 06:51:33