UI/API/1.7/Animate

« Back to the jQuery UI Docs

jQuery UI effects core 拓展了动画功能使其可以实现颜色动画. 这是大量使用了一流的转型特征,它能够在彩色动画中使用以下属性:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

或者下面的一种组合:

  • hex (#FF0000)
  • rgb (rgb(255,255,255))
  • names ("black")


NameType
示例:
一个简单的色彩动画.

$(".block").toggle(function() {
    $(this).animate({ backgroundColor: "black" }, 1000);
},function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
});



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script src="ui/effects.core.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").toggle(function() {
    $(this).animate({ backgroundColor: "black" }, 1000);
},function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
});

  });
  </script>
  <style>
  .block { 
    color: white;
    background-color: #68BFEF;
    width: 150px; 
    height: 70px;
    margin: 10px; 
  }
  </style>
</head>
<body>
  <div class="block"> Click me</div>
</body>
</html>

NameType