jQuery UI Exemples - Couleur animation (couleur animation)
Utilisez .animate () pour réaliser une animation de couleur.
Pour plus d' informations sur l' animation de couleur (Color Animation) détails, voir la documentation de l' API Animation couleur (Color Animation) .
jQuery UI empaqueté plugin jQuery couleur, plugin jQuery couleur fournit l'animation de couleur et de nombreuses autres fonctions utilitaires liées à la couleur.
Anime (Animation) Demo
Cliquez sur le bouton pour obtenir un aperçu des effets.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Effects - Animation (Animation) Demo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.toggler {width: 500px; height: 200px; position: relative;}
#button {padding: .5em 1em; text-decoration: none;}
#effect {width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff;}
h3 #effect {margin: 0; padding: 0.4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
état var = true;
$ ( "#button") .cliquez (Function () {
if (état) {
$ ( "#effect") .animate ({
backgroundColor: "# aa0000",
couleur: "#fff",
largeur: 500
}, 1000);
} Else {
$ ( "#effect") .animate ({
backgroundColor: "#fff",
couleur: "# 000",
largeur: 240
}, 1000);
}
state = état !;
});
});
</ Script>
</ Head>
<Body>
<Class Div = "de toggler">
<Div id = "effet" class = "ui-widget-content ui-coin-all">
<Classe H3 = "ui-widget-tête ui-coin-all"> Anime (Animation) </ h3>
<P>
Etiam libero neque, luctus a, eleifend nec, semper à, lorem. Sed pede. Nulla lorem metus, ut adipiscing, luctus sed, hendrerit vitae, mi.
</ P>
</ Div>
</ Div>
<a href="#" id="button" class="ui-state-default ui-corner-all"> effets de commutation </a>
</ Body>
</ Html>