2

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

2 回答 2

13

尝试这样的事情，小提琴

      $("#background").click(function(){
          $("#box").css({
                transition : 'background-color 1s ease-in-out',
                "background-color": "green"
            });
      });
于 2013-11-15T07:04:12.897 回答
0

你也可以通过 CSS In 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");
      }

});
于 2013-11-15T06:51:33.473 回答