jQuery_Project/views/effects.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>

<div class="col-md-10 col-md-offset-1">
        <h1>Efectos</h1>
        <p>
            jQuery hace trivial añadir un simple efecto a tu página. Los efectos
            con jQuery son simples de usar y con una gran dinamización al poder
            añadir duración por ejemplo. También se puede crear animación de
            propiedades CSS.
        </p>
        
        <p>Para una completa visualización de los efectos, consultar el siguiente 
            enlace en la sección de efecto: <?php  echo "<a href='index.php?do=showCheat'>Effectos</a>"; ?>
        </p>
        <h3>Introducción</h3>
        <p>jQuery permite que un elemento cualquiera, se pueda
            esconder o mostrar de manera sencilla con show() y hide().
        </p>
        <button id="esconder">Esconde este botón</button>
        <button id="mostrar">Muestra el botón escondido</button>
        <br>
        <pre>
        <code>
$(function() {
   $("#esconder").click(function() {
       $(this).hide();
   });
   $("#mostrar").click(function() {
       if($('#esconder').is(':hidden')) {
            $("#esconder").show();
        }
        else {
            alert("No está escondido");
        }
   });
});
        </code>
        </pre>
        <br>
        <h4>Cambiar la velocidad de la animación</h4>
        <p>
            Cuando se usa hide() con jQuery, la propiedad CSS display del elemento
            se pone como “none”. Esto significa que el contenido tendrá anchura
            y altura cero. Por lo tanto el contenido será como si no existiera 
            en vez de ser transparente.
            Ahora vamos a usar show() y hide() con efectos de animación.
        </p>
        <button id="esconder-rap">Esconde este botón rápido</button>
        <button id="esconder-lento">Esconde este botón lento</button>
        <button id="mostrar2">Mostrar los botones escondidos</button>
        <br>
        <br>
        <pre>
        <code>
$(function() {
   $("#esconder-rap").click(function() {
       $(this).hide("fast");
   });
   $("#esconder-lento").click(function() {
       $(this).hide("slow");
   });
   $("#mostrar2").click(function() {
       $("#esconder-rap").show("fast");
       $("#esconder-lento").show("slow");
   });
});
        </code>
        </pre>
        <br>
        <h4>Controlando la velocidad con milisegundos</h4>
        <p>También se puede tener un control más directo sobre el tiempo de la 
            animación, solo hace falta poner un número que será procesado en 
            milisegundos.
        </p>
        <input type="number" id="seconds-hide" value="500">
        <button id="esconder-seconds">Esconde este botón como tu elijas</button>
        <button id="mostrar3">Mostrar los botones escondidos</button>
        <br>
        <br>
        <pre>
        <code>
$(function() {
   $("#esconder-seconds").click(function() {
       var num = $("#seconds-hide").val();
       $(this).hide(parseInt(num));
   });
   $("#mostrar3").click(function() {
       var num = $("#seconds-hide").val();
       $("#esconder-seconds").show(parseInt(num));
   });
   
});
        </code>
        </pre>
        <br>
        <h3>Animación Fade y Slide</h3>
        <h4>SlideDown y SlideUp</h4>
        <p>
            Los efectos de .show() y .hide() usan una combinación de efectos de 
            slide y fade cuando muestran y los esconden los elementos. Si 
            prefieres usar solo uno de los efectos hay métodos alternativos como 
            .slideDown() y .slideUp() muestran o esconden el contenido, 
            respectivamente, usando un efecto deslizante.
        </p>
        <p>
            Los animaciones deslizantes usan un cambio rápido en la propiedad
            height CSS del elemento.
        </p>
        <div>
            <img id="p-dis" src="../jQueryProject/assets/images/flash.jpg">
            <br>
            <button id="p-slideUp">Haz magia y haz desaparecer la imagen</button>
            <button id="mostrar4">Mostrar la imagen con slideDown</button>
        </div>
            <br>
        <pre>
        <code>
$(function() {
   $("#p-slideUp").click(function() {
       $("#p-dis").slideUp();
   });
   $("#mostrar4").click(function() {
       $("#p-dis").slideDown();
   });
});
        </code>
        </pre>
        <br>
        <h4>
            FadeIn y FadeOut
        </h4>
            <p>
                Parecidos son los métodos de .fadeIn() y .fadeOut() para mostrar
                y esconder contenido con una animación de desaparecer. 
                Las animaciones de fade cambian rápidamente la propiedad 
                opacity del CSS del elemento.
            </p>
            <button id="desa-p">Haz desaparecer todos los párrafos</button>
            <button id="mostrar-p">Hazlos aparecer de nuevo</button>
            <br>
        <br>
        <pre>
        <code>
$(function() {
    $("#desa-p").click(function() {
       $( "p" ).fadeOut( 1500 );
   });
   $("#mostrar-p").click(function() {
       $( "p" ).fadeIn( 750 );
   });
});

        </code>
        </pre>
        <br>
        <h3>Cambiar estado basado en la actual visibilidad</h3>
        <p>
            jQuey puede cambiar la visibilidad basada en el estado actual de la 
            visibilidad. Mediante .toggle() se mostrará el elemento si está 
            escondido y lo esconderá si está visible. Y se pueden pasar los 
            mismos argumentos a .toggle() que al resto de los métodos.
        </p>
        <div>
            <img id="quicksilver" src="../jQueryProject/assets/images/quiksilver.jpg">
            <button id="toggle-fast">Haz aparecer o desaparecer la imagen rapido</button>
            <button id="toggle-normal">Haz aparecer o desaparecer la imagen normal</button>
            <button id="toggle-slow">Haz aparecer o desaparecer la imagen muy lento</button>
        </div>
        <br>
        <br>
        <pre>
        <code>
$(function() {
    $("#toggle-fast").click(function() {
       $( "#quicksilver" ).toggle();
   });
   $("#toggle-normal").click(function() {
       $( "#quicksilver" ).toggle( "slow" );
   });
   $("#toggle-slow").click(function() {
       $( "#quicksilver" ).toggle( 5000 );
   });
});
        </code>
        </pre>
        <br>
        <h4>fadeToggle y slideToggle</h4>
        <p>Los métodos fadeToggle y slideToggle utilizan los métodos que hemos visto
            anteriormente. El método fadeToggle hace desaparecer una imagen o la hace aparecer
            dependiendo de su visibilidad y el método slideToggle muestra o esconde el contenido, 
            respectivamente, usando un efecto deslizante.
        </p>
        <div>
            <img id="flash2" src="../jQueryProject/assets/images/flash.jpg">
            <img id="quicksilver2" src="../jQueryProject/assets/images/quiksilver.jpg"><br>
            <button id="slideTog">slideToggle Flash</button>
            <button id="fadeTog">fadeToggle Quicksilver</button>
        </div>
        <br>
        <pre>
        <code>
$(function() {
    $("#fadeTog").click(function() {
       $( "#quicksilver2" ).fadeToggle();
   });
   $("#slideTog").click(function() {
       $( "#flash2" ).slideToggle( );
   });
});
        </code>
        </pre>
        <br>
        <h3>Efectos personalizados con el método .animate()</h3>
        <p>Este método te deja animar un elemento con las propiedades CSS
            que tu quieras. Este método te deja animar un elemento a un valor
            elegido absoluto o un valor relativo al valor actual.
        </p>
        <p>El método <a href="http://api.jquery.com/animate/">.animate()</a> 
            tiene un gran número de opciones que recomiendo ver en su página.
            Aunque hay que tener en cuenta que no se puede cambiar el background-color
            a no ser que se tenga el plugin de <a href="https://github.com/jquery/jquery-color">jQuery Color</a>.
        </p>
        <div id="caja_negra">
            <p id="blanco">Soy una caja negra que mide 100px de alto.</p>
        </div>
        <pre>
        <code>
$( "#caja_negra" ).hover(
    function() {
        $( this ).animate({
          left: [ "+=100", "swing" ],
          height: [ "+=150" ]
        }, 1000 );
    }, 
    function() {
        $( this ).animate({
          left: [ "-=100", "swing" ],
          height: [ "-=100" ]
        }, 1000 );
    }
);
        </code>
        </pre>
        <br>
        <h3>Queue</h3>
        <p>La encadenación de métodos son una herramienta potente de jQuery
            , que permiten que una serie de funciones sean en orden
            en un elemento. Métodos como .slideUp (), 
            .slideDown (), .fadeIn () y .fadeOut () cambian
            uno o más valores CSS creando los efectos que se ven con jQuery.
            Podemos pasar una función Callback al método .animate (), 
            que se ejecutará una vez que la animación se haya completado.
        </p>
        <p>La longitud de métodos encadenados es: <span id="spanQ"></span></p>
        <div id="contQ">
            <div id="boxQ">

            </div>
        </div>
        <button id="buttonQ">Púlsame para ver un cuadrado mágico</button><br><br>
        <pre>
        <code>
$("#buttonQ").click(function() {
    runIt();
    showIt();
});

function runIt() {
    $("#boxQ")
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({ left: "-=200" }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}

function showIt() {
  var n = $("#boxQ").queue( "fx" );
  $( "#spanQ" ).text( n.length );
  setTimeout( showIt, 100 );
}
        </code>
        </pre>
        <br>
        <h3>Método delay()</h3>
        <p>
            El método delay() permite pausar ejecuciones de funciones que se siguen
            mediante callbacks.
            Es un método útil para retrasar la ejecución de funciones encadenadas para un mismo
            elemento. Sin embargo, es importante señalar que no se puede utilizar
            los métodos show() y hide() sin argumentos.
        </p>
        <div>
            <img id="flash3" class="superhero" src="../jQueryProject/assets/images/flash.jpg">
            <img id="quicksilver3" class="superhero" src="../jQueryProject/assets/images/quiksilver.jpg">
            <img id="wonder3" class="superhero" src="../jQueryProject/assets/images/wonder.jpg">
            <img id="super3" class="superhero" src="../jQueryProject/assets/images/supergirl.jpg"><br>
            <button id="button-delay">Haz aparecer o desaparecer las imágenes rápido</button>
        </div>
        <br>
        <pre>
        <code>
$(function() {
    $("#button-delay").click(function() {
        $( "#quicksilver3" ).slideUp(800).delay( 1500 ).fadeIn(1000);
        $( "#flash3" ).slideUp(800).fadeIn(1000);
        $( "#wonder3" ).hide(800).delay( 1500 ).show(1000);
        $( "#super3" ).hide().delay( 1500 ).show();
    });
});
        </code>
        </pre>
        <br>
        <h3>Método stop()</h3>
        <p>
            El método stop() para la animación que se está ejecutando en ese momento 
            para el elemento indicado. Si por ejemplo se usa stop() mientras un
            elemento está usando slideUp(), el elemento seguirá mostrado pero con
            una altura menor en el momento de utilizar stop().
            Si más de una animación es llamada en el mismo elemento de manera 
            encadenada, las animaciones que siguen antes de llegar a stop() 
            pararán y las animaciones que hay después empezarán inmediatamente.
        </p>
        <h4>clearQueue y jumpToEnd </h4>
        <p>
            Bien, ahora vamos a ver que stop() tiene dos opciones para 
            personalizar su efecto.
        </p>
        <pre>
        <code>
.stop( [clearQueue ] [, jumpToEnd ] )
        </code>
        </pre>
        <br>
        <p>
            Los parámetros de clearQueue y jumpToEnd son parámetros booleanos 
            que por defecto están en false.
            El parámetro clearQueue si lo ponemos a True sirve para hacer que 
            nunca se ejecuten las siguientes animaciones que están en la cola.
            El parámetro jumpToEnd como su nombre indica, si se pone el argumento
            a True hace que la animación salte al final y termine inmediatamente 
            aunque le queden segundos para completarse. 
        </p>
        <div id="square">
            
        </div>
        <button id="go">Go</button>
        <button id="stop">STOP!</button>
        <button id="back">Back</button><br>
        <pre>
        <code>
$( "#go" ).click(function() {
  $( "#square" ).animate({ left: "+=100px" }, 2000 );
});
 
// Para la animación cuando se pulsa este botón
$( "#stop" ).click(function() {
  $( "#square" ).stop();
});
 
// Empieza la animación en el sentido contrario
$( "#back" ).click(function() {
  $( "#square" ).animate({ left: "-=100px" }, 2000 );
});
        </code>
        </pre>
        <br>
        <p>
            Aquí podemos ver otro ejemplo que hace uso del comando stop().
        </p>
        <button id="toggle-stop">slideToggle</button>
        <div id="square2">
            <div class="square2"></div>
        </div>
        <pre>
        <code>
$( "#toggle-stop" ).on( "click", function() {
  $(".square2").stop().slideToggle( 1000 );
});
        </code>
        </pre>
        <br>
        <p>La mayor utilidad del método stop() es cuando se necesita animar
            un elemento con mouseenter y mouseleave.
        </p>
        
        <div id="hoverme-stop-2">
            <p>Pasa sobre mi</p>
            <img id="hoverme" src="../jQueryProject/assets/images/book.jpg" alt="" width="100" height="123">
        </div>
        <pre>
        <code>
$( "#hoverme-stop-2" ).hover(function() {
  $( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
  $( this ).find( "img" ).stop( true, true ).fadeIn();
});
        </code>
        </pre>
        <br>
        <div id="hoverme-stop-1">
            <p>Pasa sobre mi</p>
            <img id="hoverme1" src="../jQueryProject/assets/images/book2.png" alt="" width="100" height="123">
        </div>
        <pre>
        <code>
$( "#hoverme-stop-1" ).hover(function() {
  $( this ).find( "img" ).fadeOut();
}, function() {
  $( this ).find( "img" ).fadeIn();
});
        </code>
        </pre>
        <br>
    </div>

<script src="../jQueryProject/assets/js/effects.js"></script>