Contenidos

Efectos

JQuery permite, de una forma sencilla, crear efectos, transiciones, movimientos, animaciones, etc

Hide y Show

El método hide permite ocultar un elemento

Para poder volver a hacerlo visible podemos utilizar el método show

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $(function() {
            $('#hide').click(function() {
                $('#part01').hide(800);
            };
 
            $('#show').click(function() {
                $('#part01').hide(1000);
            };
        });
        </script>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p id='par01'>Si pulsas el botón 'ocultar' desapareceré<br/>
        Y si pulsas en el botón 'mostrar' pues apareceré</p>

        <button id='hide'>Ocultar</button>
        <button id='show'>Mostrar</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo anterior cuando se pulsa el botón con id hide se ha usado el método hide con un parámetro en el que se indica la velocidad (en milisegundos) para ocultar el párrafo con id part01

Al pulsar el botón con id show se ha usado el método show con un parámetro en el que se indica la velocidad (en milisegundos) para mostrar de nuevo el párrafo con id part01

Toggle

Permite alternar entre hide() y show(), o viceversa, también admite el parámetro para controlar la velocidad

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $(function() {
            $('#toggleBtn').click(function() {
                $('#part02').hide(800);
            };
        });
        </script>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p id='par02'>Si pulsas el botón 'cambiar' desapareceré o apareceré, según su estado anterior</p>

        <button id='toggleBtn'>Cambiar</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Este ejemplo es similar al mostrado con hide y show, pero se obtiene un ejecto parecido con menos código

Fading

Es similar a Toggle, ya que el elemento aparece o desaparece, sin embargo lo hace de forma gradual

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='fadeBtn'>Pulsa para que desaparezcan o aparezcan unas cajas</button><br/><br/>

        <div id='div01' style='width: 8px; height: 80px; background-color: red;'></div>
        <div id='div02' style='width: 8px; height: 80px; background-color: green;'></div>
        <div id='div03' style='width: 8px; height: 80px; background-color: blue;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar los distintos métodos de fadding

FadeIn

Permite que un elemento oculto aparezca

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeIn();
    $('#div02').fadeIn('slow');
    $('#div03').fadeIn(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

FadeOut

Permite que un elemento se oculte

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeOut();
    $('#div02').fadeOut('slow');
    $('#div03').fadeOut(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

FadeToggle

Permite altenar entre los efectos fadeIn y fadeOut de un elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeTogglet();
    $('#div02').fadeToggle('slow');
    $('#div03').fadeToggle(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

Sliding

Nos permite mover elementos para que se muestren hacia arriba o hacia abajo

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <style>
        #panelAux, #flip {
            background-color: #F6CFCE;
            border: 1px solid #CCC;
            border-radius: 4px;
            padding: 5px;
            text-align: center;
        }

        #panelAux {
             padding: 50px;
             display: none;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='flip'>Pulsa aquí para que se despliegue y contraiga el panel</div>
        <div id='panelAux'>¡Me gusta jQuery!</div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar los distintos métodos de sliding

SlideDown

Mueve hacia abajo el elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panel').slideDown();
});

Modificamos el HTML del ejemplo anterior para añadir este script

SlideUp

Mueve hacia arriba el elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panel').slideUp();
});

Modificamos el HTML del ejemplo anterior para añadir este script

SlideToggle

Permite altenar entre los efectos slideDown y slideUp del elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panelAux').slideToggle('slow');
});

Modificamos el HTML del ejemplo anterior para añadir este script

Animaciones

También es posible crear animaciones personalizadas con el método animate() con la siguiente sintaxis:

$(selector).animate((propiedades_CSS), velocidad);

El primer parámetro define un conjunto de propiedades CSS, encerradas entre los simbolos { y }, que se van a modificar

El segundo indica la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='animateBtn01'>Comenzar animación</button>

        <div id='box01' style='background: #D5322D; height: 100px; widht: 100px; display: block;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715635097&k=f641a2824158e9c9c5fb806619b14e53&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar varias formas de hacer animaciones

$('animateBtn01').click(function() {
    $('box01').animate( {left:'250px'} );
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado una única propiedad

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades utilizando valores relativos

$('animateBtn01').click(function() {
    var div = $('box01');

    div.animate( {
        height:'300px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'300px',
        opacity:'0.8'
    }, 'slow');
    div.animate( {
        height:'100px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'100px',
        opacity:'0.8'
    }, 'slow');
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades ejecutando varias animaciones consecutivas una detras de otra

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Efectos

Efectos

Hide y Show

Toggle

Fading

FadeIn

FadeOut

FadeToggle

Sliding

SlideDown

SlideUp

SlideToggle

Animaciones

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Efectos

Hide y Show

Toggle

Fading

FadeIn

FadeOut

FadeToggle

Sliding

SlideDown

SlideUp

SlideToggle

Animaciones

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies