Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/efectos»

De WikiEducator
Saltar a: navegación, buscar
(Página reemplazada por «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} <br />»)
Línea 1: Línea 1:
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
<br />
 
<br />
 +
*Los efectos son acciones que queremos realizar sobre un elemento seleccionado
 +
*La sintaxis sigue la básica de '''''jquery'''''
 +
<source lang=javascript>
 +
$(seleccion).accion()
 +
</source>
 +
*Vamos a ver distintos tipos de efectos, las posibilidades son enormes
 +
===Mostrar/Ocultar===
 +
<source lang=javascript>
 +
$(seleccion).hide(time, callback)
 +
$(seleccion).show(time, callback)
 +
</source>
 +
*Los parámetros time y callback son opcioneles
 +
{{Actividad|
 +
Title="Muestra u oculta una imagen
 +
<source lang=javascirpt>
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Document</title>
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
    <script>
 +
    < script type = 'text/javascript'
 +
    src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >
 +
    </script>
 +
    <script type="text/javascript">
 +
    $(document).ready(activa);
 +
 +
    function activa () {
 +
        $("#muestra").click(muestra);
 +
        $("#oculta").click(oculta);
 +
    }
 +
 +
    function muestra(){
 +
    $("img").show();
 +
    }
 +
    function oculta(){
 +
    $("img").hide();
 +
    }
 +
    </script>
 +
</head>
 +
 +
<body>
 +
    <h1>Mostrando u ocultando imágenes</p>
 +
    <button id="muestra">Muestra </button>
 +
    <button id="oculta">Oculta</button>
 +
    <br />
 +
    <img src="naturaleza.jpg" alt="">
 +
</body>
 +
</html>
 +
</source>
 +
}}
 +
;parámetros opicones
 +
:El primer parámetros especifica el tiempo en el cual ocurre la acción
 +
:Valores
 +
#slow
 +
#fast
 +
# un entero que especifica el tiempo en milisegundos
 +
:El segundo parámetro es una función que se ejecutará cuando haya terminado la acción
 +
{{Actividad|
 +
Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado}}
 +
 +
jQuery Effects
 +
jQuery Hide/Show
 +
jQuery Fade
 +
jQuery Slide
 +
jQuery Animate
 +
jQuery stop()
 +
jQuery Callback
 +
jQuery Chaining
 +
===

Revisión de 20:44 6 abr 2016



  • Los efectos son acciones que queremos realizar sobre un elemento seleccionado
  • La sintaxis sigue la básica de jquery 
$(seleccion).accion()
  • Vamos a ver distintos tipos de efectos, las posibilidades son enormes

Mostrar/Ocultar

$(seleccion).hide(time, callback)
$(seleccion).show(time, callback)
  • Los parámetros time y callback son opcioneles


Icon activity.jpg

"Muestra u oculta una imagen

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    < script type = 'text/javascript'
    src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >
    </script>
    <script type="text/javascript">
    $(document).ready(activa);

    function activa () {
        $("#muestra").click(muestra);
        $("#oculta").click(oculta);
    }

    function muestra(){
    	$("img").show();
    }
    function oculta(){
    	$("img").hide();
    }
    </script>
</head>

<body>
    <h1>Mostrando u ocultando imágenes</p>
    <button id="muestra">Muestra </button>
    <button id="oculta">Oculta</button>
    <br />
    <img src="naturaleza.jpg" alt="">
</body>
</html>

{{{1}}}



parámetros opicones
El primer parámetros especifica el tiempo en el cual ocurre la acción
Valores
  1. slow
  2. fast
  3. un entero que especifica el tiempo en milisegundos
El segundo parámetro es una función que se ejecutará cuando haya terminado la acción


Icon activity.jpg

Actividad

Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado




jQuery Effects jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

=

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/efectos&oldid=19286»