Content

Effects

JQuery allows you to, in a simple way, create effects, transitions, movements, animations, etc

Hide and Show

The method hide allows you to hide an element

To be able to re-make it visible we can use the method 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'>If you press the 'hide' button, I will disappear<br/>
        And if you click on the 'show' button then I will appear</p>

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

In the above example when the button is clicked with id hide has used the method to hide a parameter that indicates the speed (in milliseconds) to hide the paragraph with id part01

When you press the button with id show it has been used the show method with a parameter that indicates the speed (in milliseconds) to display the paragraph with id part01

Fading

It is similar to Toggle, since the element appears or disappears, however it does gradually

<!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'>Press to disappear or appear some boxes</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=1714325517&k=f3f42e98d5135757fa2d5aac825187a1"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714325517&k=f3f42e98d5135757fa2d5aac825187a1&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test the different methods of fadding

FadeIn

Allows that a hidden item appears

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

FadeOut

Allows an element to be hidden

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

FadeToggle

Allows altenar between the effects of fadeIn and fadeOut on a element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

Sliding

It allows us to move items to show up or down

<!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'>Click here to display and contract the panel</div>
        <div id='panelAux'>I like jQuery!</div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714325517&k=f3f42e98d5135757fa2d5aac825187a1"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714325517&k=f3f42e98d5135757fa2d5aac825187a1&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test the different methods of sliding

SlideDown

It moves down the element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

SlideUp

Move element up

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

SlideToggle

Allows altenar between the effects slideDown and slideUp to the element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

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

Modify the HTML in the previous example to add this script

Animations

It is also possible to create custom animations with the method animate() with the following syntax:

$(selector).animate((CSS_Properties), speed);

The first parameter defines a set of CSS_Properties, enclosed between the symbols { and }, that are to be modified

The second indicates the speed(in milliseconds) or the values ‘slow’ or ‘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'>Start animation</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=1714325517&k=f3f42e98d5135757fa2d5aac825187a1"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714325517&k=f3f42e98d5135757fa2d5aac825187a1&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test various ways of doing animations

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

Modify the HTML in the previous example to add this script, in which we modified a single property

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

Modify the HTML in the previous example to add this script, in which we modified several properties

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

Modify the HTML in the previous example to add this script, in which we modified several properties using relative values

$('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');
});

We modified the HTML from the previous example to add this script, in which we modified several properties by running several consecutive animations one after another

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	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	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	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

Secarcam's Computer Science Web

Effects

Effects

Hide and Show

Fading

FadeIn

FadeOut

FadeToggle

Sliding

SlideDown

SlideUp

SlideToggle

Animations

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Effects

Hide and Show

Fading

FadeIn

FadeOut

FadeToggle

Sliding

SlideDown

SlideUp

SlideToggle

Animations

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy