jQuery UI Beispiel - Spezialeffekte (Effekt)
Anwendung eines Elementes der Animationseffekte.
Für weitere Informationen über .effect() Einzelheiten der Methoden finden Sie in der API - Dokumentation .effect () .
.effect () Demo
Klicken Sie auf die Schaltfläche Effekte, um eine Vorschau.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Effekte - .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;}
#effect h3 {margin: 0; padding: 0.4em; text-align: center;}
.ui-Effekte-Transfer {border: 2px gepunkteten grau;}
</ Style>
<Script>
$ (Function () {
// Führen Sie die aktuell Effekt Funktion runEffect ausgewählt () {
// Leite Effekte Typ var selectedEffect = $ ( "#effectTypes") .val ();
// Die meisten Effekte müssen nicht die Standardlieferoptionen var Optionen type = {};
// Einige Spezialeffekte mit den erforderlichen Parametern if (selectedEffect === "scale") {
options = {Prozent: 0};
} Else if (selectedEffect === "Transfer") {
= Optionen {zu: "#Button" classname: "ui-Effekte-Transfer"};
} Else if (selectedEffect === "Größe") {
= Optionen {zu: {width: 200, Höhe: 60}};
}
// Führen Effekte $ ( "#effect") .effect (selectedEffect, Optionen, 500, Rückruf);
};
// Callback Callback-Funktion () {
setTimeout (function () {
$ ( "#effect") .removeAttr ( "Style") .Hide () fadeIn () .;
}, 1000);
};
// Stellen Sie den Wert entsprechend der gewählten Menü-Effekte $ ( "#Button") .click (function () {
runEffect ();
return false;
});
});
</ Script>
</ Head>
<Body>
<Div class = "toggler">
<Div id = "Effekt" class = "ui-Widget-Inhalt ui-Ecke-all">
<H3 class = "ui-Widget-Header ui-Ecke-all"> Spezialeffekte (Effekt) </ h3>
<P>
Etiam libero neque, luctus ein, eleifend nec, semper an, Lorem. Sed pede. Nulla Lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</ P>
</ Div>
</ Div>
<Select name = "Effekte" id = "effectTypes">
<Option value = "blind"> Shades Effekte (Blind-Effekt) </ option>
<Option value = "bounce"> Rebound-Effekte (Bounce-Effekt) </ option>
<Option value = "clip"> Clip-Effekte (Clip-Effekt) </ option>
<Option value = "drop"> Landing Effekte (Drop-Effekt) </ option>
<Option value = "explodieren"> Explosionseffekte (Explode Effekt) </ option>
<Option value = "fade"> Fade-Effekte (Fade-Effekt) </ option>
<Option value = "fold"> Effekte Falten (Falten-Effekt) </ option>
<Option value = "highlight"> Highlight-Effekte (Highlight-Effekt) </ option>
<Option value = "puff"> Expansionseffekte (Puff-Effekt) </ option>
<Option value = "pulsieren"> schlagen Effekte (Pulsate Effect) </ option>
<Option value = "Skala"> Zoom-Effekte (Skaleneffekt) </ option>
<Option value = "shake"> Vibrationseffekte (Shake-Effekt) </ option>
<Option value = "Größe"> Größeneffekte (Size Effect) </ option>
<Option value = "slide"> Dia-Effekte (Slide-Effekt) </ option>
<Option value = "Transfer"> Transfereffekte (Transfer-Effekt) </ option>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> laufen Effekte </a>
</ Body>
</ Html>
Easing Demo
Dieses Beispiel verwendet HTML-Canvas-Element, ziehen alle Easing jQuery UI zur Verfügung stellt. Klicken Sie auf jeder Karte die Lockerung Verhalten zu sehen. .
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI-Effekte - Easing 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 (
"Ihr Browser Leinwand nicht unterstützt, zeigt dies die Notwendigkeit, die Leinwand im Browser zu unterstützen."
) .appendTo ( "#graphs");
Rückkehr;
}
var i = 0,
width = 100,
height = 100;
$ .each ($ .easing, Funktion (Name, impl) {
var Graph = $ ( "<div>") .addClass ( "Graph") .appendTo ( "#graphs"),
text = $ ( "<div>") .text (++ i + "." + name) .appendTo (Grafik),
wrap = $ ( "<div>") .appendTo (Grafik) css ( 'Überlauf', 'versteckt'),
Leinwand = $ ( "<canvas>") .appendTo (wrap) [0];
canvas.width = Breite;
canvas.height = Höhe;
var drawHeight = Höhe * 0.8,
cradius = 10;
ctx = canvas.getContext ( "2D");
ctx.fillStyle = "black";
Zeichnen Hintergrund ctx.beginPath () //;
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, Höhe - cradius);
ctx.quadraticCurveTo (0, height, cradius, Höhe);
ctx.lineTo (Breite - cradius, Höhe);
ctx.quadraticCurveTo (Breite, Höhe, Breite, Höhe - cradius);
ctx.lineTo (Breite, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Zeichnen Sie die untere Linie ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (Breite * 0,1, drawHeight + 0,5);
ctx.lineTo (Breite * 0.9, drawHeight + 0,5);
ctx.stroke ();
// Zeichnen Sie die obere Linie ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (Breite * 0,1, drawHeight * 0,3 bis 0,5);
ctx.lineTo (Breite * 0.9, drawHeight * 0,3 bis 0,5);
ctx.stroke ();
// Zeichnen Lockerung
ctx.strokeStyle = "weiß";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (Breite * 0,1, drawHeight);
$ .each (New Array (Breite), Funktion (Position) {
var state = Position / Breite,
val = impl (Zustand, Position, 0, 1, Breite);
ctx.lineTo (Position * 0,8 + Breite * 0,1,
drawHeight - drawHeight * val * 0,7);
});
ctx.stroke ();
// Dynamisch wechselnde Klicks graph.click (function () {
wickeln
.animate ({height: "verstecken"}, 2000, Name)
.delay (800)
.animate ({height: "show"}, 2000, Name);
});
graph.width (Breite) .height (Höhe + text.height () + 10);
});
});
</ Script>
</ Head>
<Body>
<Div id = "Graphen"> </ div>
</ Body>
</ Html>