Question

下面是我的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>

Answer 1

尝试这样的事情，FIDDLE

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

Answer 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");
      }

});

仅使用jquery逐渐更改div颜色

2 个答案: