jQuery UI ejemplo - efectos especiales (Efectos)
La aplicación de un elemento de los efectos de animación.
Para obtener más información acerca de .effect() detalles de los métodos, consulte la documentación de la API .effect () .
.effect () Demo
Haga clic en el botón de vista previa de efectos.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Efectos de jQuery UI - .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; altura: 200px; position: relative;}
botón # {padding: 1 em .5em; text-decoration: none;}
#effect {width: 240px; altura: 135px; padding: 0.4em; position: relative;}
#effect h3 {margin: 0; padding: 0.4em; text-align: center;}
.ui efectos de transferencia {border: 2px gris de puntos;}
</ Style>
<Script>
$ (Function () {
// Ejecutar el runEffect función de efectos seleccionado actualmente () {
// Deducir efectos de tipo var selectedEffect = $ ( "#effectTypes") .val ();
// La mayoría de los efectos no es necesario que escriba las opciones de opciones de entrega por defecto var = {};
// Algunos efectos especiales con los parámetros requeridos si (selectedEffect === "escala") {
Opciones = {ciento: 0};
} Else if (selectedEffect === "transferencia") {
Opciones = {a: "botón #", Nombre de clase: "ui efectos de transferencia"};
} Else if (selectedEffect === "tamaño") {
Opciones = {a: {width: 200, altura: 60}};
}
// efectos ejecutar $ ( "#effect") .effect (selectedEffect, opciones, 500, devolución de llamada);
};
// Función de devolución de llamada de devolución de llamada () {
setTimeout (function () {
$ ( "#effect") .removeAttr ( "Estilo") .hide () fadeIn () .;
}, 1000);
};
// Establecer el valor de acuerdo con los efectos de menú seleccionados $ ( "botón #") .click (function () {
runEffect ();
return false;
});
});
</ Script>
</ Head>
<Cuerpo>
<Div class = "basculador">
<Div id = "efecto" class = "ui-ui widget de-contenido-esquina-all">
<H3 class = "ui-ui widget de cabecera-esquina-all"> efectos especiales (efecto) </ h3>
<P>
Etiam libero ñeque, luctus un eleifend nec, sempre en, lorem. Sed pede. Metus Nulla lorem, ut adipiscing, luctus sed, hendrerit vitae, mi.
</ P>
</ Div>
</ Div>
<select name = "efectos" id = ""> effectTypes
<Option value = "ciegos"> Sombras efectos (efecto) Ciego </ option>
<Option value = "rebote"> efectos de rebote (efecto rebote) </ option>
<Option value = "clip"> efectos de clip (Efecto de clip) </ option>
<Option value = "caída"> efectos de aterrizaje (Drop Effect) </ option>
<Option value = "explotar"> efectos de la explosión (Explode Efecto) </ option>
<Option value = "fade"> efectos de fundido (Fade Effect) </ option>
<Option value = "doblar"> efectos de plegado (Doble Efecto) </ option>
<Opción Valor = "highlight"> efectos de luz (Resalte Efecto) </ option>
<Option value = "puff"> efectos de expansión (Puff efecto) </ option>
<Option value = "pulsar"> superar los efectos (efecto) pulsan </ option>
<Option value = "escala"> efectos de zoom (Escala efecto) </ option>
<Option value = "sacudir"> Efectos de vibración (Shake efecto) </ option>
<Option value = "tamaño"> efectos de tamaño (tamaño del efecto) </ option>
<Option value = "slide"> efectos de diapositivas (diapositiva Efecto) </ option>
<Option value = "transferencia"> efectos de transferencia (efecto de transferencia) </ option>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> efectos ejecutar </a>
</ Body>
</ Html>
demostración aliviando
En este ejemplo se utiliza el elemento HTML Canvas, dibujar todos easings jQuery UI proporciona. Haga clic en cada mapa para ver el comportamiento de aceleración. .
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI - facilitando Efectos de demostración </ 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 (
"Su navegador no soporta lienzo, esto demuestra la necesidad de apoyar a la lona en el navegador."
.appendTo) ( "#graphs");
volver;
}
var i = 0,
width = 100,
height = 100;
$ Each ($ .easing, función (nombre, impl) {
gráfico var = $ ( "<div>") .addClass ( "graph") ( ".appendTo #graphs"),
text = $ ( "<div>") .text (++ i + "." + nombre) .appendTo (gráfico),
envuelva = $ ( "<div>") .appendTo (gráfico) .css ( "desbordamiento", "oculto"),
lienzo = $ ( "<canvas>") .appendTo (envoltura) [0];
canvas.width = ancho;
canvas.height = altura;
var = altura drawHeight * 0.8,
cradius = 10;
ctx = canvas.getContext ( "2d");
ctx.fillStyle = "negro";
// Dibuja fondo ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, altura - cradius);
ctx.quadraticCurveTo (0, altura, cradius, altura);
ctx.lineTo (ancho - cradius, altura);
ctx.quadraticCurveTo (anchura, altura, anchura, altura - cradius);
ctx.lineTo (ancho, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Dibuja la línea de fondo ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (ancho * 0.1, drawHeight + 0,5);
ctx.lineTo (ancho * 0.9, drawHeight + 0.5);
ctx.stroke ();
// Dibuja la línea superior ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (ancho * 0.1, drawHeight * 0,3 a 0,5);
ctx.lineTo (ancho * 0.9, drawHeight * .3 - .5);
ctx.stroke ();
// Dibuja aliviando
ctx.strokeStyle = "blanco";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (ancho * 0.1, drawHeight);
$ Each (New Array (ancho), función (posición) {
var state = posición / anchura,
val = impl (estado, posición, 0, 1, ancho);
ctx.lineTo (posición * 0,8 * 0,1 + ancho,
drawHeight - drawHeight * * val 0,7);
});
ctx.stroke ();
// Dinámicamente cambiantes clics graph.click (function () {
envolver
.animate ({height: "ocultar"}, 2000, nombre)
.delay (800)
.animate ({height: "espectáculo"}, 2000, nombre);
});
graph.width (ancho) .height (alto + text.height () + 10);
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "gráficos"> </ div>
</ Body>
</ Html>