jQuery UI par exemple - des effets spéciaux (Effect)
L'application d'un élément d'effets d'animation.
Pour plus d' informations sur .effect() des détails sur les méthodes, consultez la documentation de l' API .effect () .
.effect () 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 - .effect () 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;}
h3 #effect {margin: 0; padding: 0.4em; text-align: center;}
.ui effets de transfert {border: gris pointillé 2px;}
</ Style>
<Script>
$ (Function () {
// Exécuter actuellement sélectionné runEffect fonction de l'effet () {
// Dérivez effets de type var selectedEffect = $ ( "#effectTypes") .val ();
// La plupart des effets ne ont pas besoin de taper les options options de livraison par défaut var = {};
// Certains effets spéciaux avec les paramètres requis si (selectedEffect === "échelle") {
options = {pour cent: 0};
} Else if (selectedEffect === "transfert") {
options = {à: "#button", className: "ui-effets-transfert»};
} Else if (selectedEffect === "taille") {
options = {à: {width: 200, hauteur: 60}};
}
// effets Run $ ( "#effect") .effect (selectedEffect, options, 500, rappel);
};
// Fonction de rappel callback () {
setTimeout (function () {
$ ( "#effect") .removeAttr ( "Style") .hide () fadeIn () .;
}, 1000);
};
// Définir la valeur en fonction des effets de menu sélectionnés $ ( «#button») .cliquez (function () {
runEffect ();
return false;
});
});
</ 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"> effets spéciaux (effet) </ 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>
<select name = "effets" id = "effectTypes">
<Option value = "aveugles"> Shades effets (aveugles Effect) </ option>
<Option value = "rebond"> effets (Bounce effet) rebond </ option>
<Option value = "clip"> Effets clip (Effet Clip) </ option>
<Option value = "drop"> effets d'atterrissage (Effet goutte) </ option>
effets d'explosion <valeur d'option = "exploser"> (Explode Effect) </ option>
<Option value = "fade"> effets (Fade Effect) Fade </ option>
<Option value = "fold"> effets de pliage (Pliez Effect) </ option>
effets de surbrillance <valeur Option = "highlight"> (Mettre Effect) </ option>
<Option value = "bouffée"> effets de dilatation (Puff Effect) </ option>
<Option value = "pulser"> effets (Pulsate Effect) battre </ option>
<Option value = "échelle"> effets de zoom (échelle Effect) </ option>
<Option value = "secouer"> effets de vibrations (Agiter Effect) </ option>
<Option value = "taille"> Effets de taille (taille d'effet) </ option>
<Option value = "slide"> effets de diapositives (Slide Effect) </ option>
<Option value = "transfert"> effets de transfert (effet de transfert) </ option>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> effets courir </a>
</ Body>
</ Html>
Demo Assouplissement
Cet exemple utilise l'élément HTML Canvas, tirer toutes les lissages jQuery UI fournit. Cliquez sur chaque carte pour voir le comportement d'assouplissement. .
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Effects - Assouplissement 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>
.graph {
float: left;
margin-left: 10px;
}
</ Style>
<Script>
$ (Function () {
if (! $ ( "<canvas>") [0] .getContext) {
$ ( "<Div>") .text (
"Votre navigateur ne supporte pas la toile, ce qui démontre la nécessité de soutenir la toile dans le navigateur."
) .appendTo ( «#graphs»);
retour;
}
var i = 0,
largeur = 100,
height = 100;
.each $ ($ .easing, Fonction (nom, impl) {
graphique var = $ ( "<div>") .addClass ( "graph") .appendTo ( «#graphs»),
text = $ ( "<div>") .text (++ i + "." + nom) .appendTo (graphique),
enveloppez = $ ( "<div>") .appendTo (graphique) Css ( 'overflow', 'caché'),
toile = $ ( "<canvas>") .appendTo (wrap) [0];
canvas.width = largeur;
canvas.height = hauteur;
var drawHeight = hauteur * 0,8,
cradius = 10;
ctx = canvas.getContext ( "2d");
ctx.fillStyle = "black";
// Dessine fond ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, hauteur - cradius);
ctx.quadraticCurveTo (0, hauteur, cradius, hauteur);
ctx.lineTo (largeur - cradius, hauteur);
ctx.quadraticCurveTo (largeur, hauteur, largeur, hauteur - cradius);
ctx.lineTo (largeur, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Dessine la ligne de fond ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (largeur * 0,1, drawHeight + 0,5);
ctx.lineTo (largeur * 0,9, drawHeight + 0,5);
ctx.stroke ();
// Dessine la ligne supérieure ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (largeur * 0,1, drawHeight * 0,3 à 0,5);
ctx.lineTo (largeur * 0,9, drawHeight * 0,3 à 0,5);
ctx.stroke ();
// Dessine l'assouplissement
ctx.strokeStyle = "blanc";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (largeur * 0,1, drawHeight);
$ .each (New Array (largeur), fonction (position) {
état var = Position / largeur,
val = impl (état, la position, 0, 1, largeur);
ctx.lineTo (position de * 0,8 + largeur * 0,1,
drawHeight - val drawHeight * * 0,7);
});
ctx.stroke ();
// Dynamiquement changeantes clics graph.click (function () {
enrouler
.animate ({height: "cacher"}, 2000, nom)
.delay (800)
.animate ({height: "show"}, 2000, nom);
});
graph.width (largeur) .height (hauteur + text.height () + 10);
});
});
</ Script>
</ Head>
<Body>
<Div id = "graphiques"> </ div>
</ Body>
</ Html>