JqueryUI - Color Animation-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Color Animation

jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.

backgroundColor − Sets the background color of the element.

borderTopColor − Sets the color for top side of the element border.

borderBottomColor − Sets the color for bottom side of the element border.

borderLeftColor − Sets the color for left side of the element border.

borderRightColor − Sets the color for right side of the element border.

color − Sets the text color of the element.

outpneColor − Sets the color for the outpne; used to emphasize the element.

Syntax

The following is the syntax of the jQueryUI animate method −

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

You can set any number of properties in this method separated by , (comma).

Example

The following example demonstrates the use of addClass() methods.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $( #button-1 ).cpck(function() {
               $( #animTarget ).animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <span id = animTarget class = "elemClass">
         Hello!
      </span>
      <button id = "button-1">Cpck Me</button>
   </body>
</html>

Let us save the above code in an HTML file animateexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −