jQuery framework implements three animation methods of element display and hiding

This article is shared from Huawei Cloud Community "jQuery framework to implement element display and hiding animation [with case analysis]", the original author is: Gray Monkey.

First, let’s take a look at a simple animation effect diagram:

​

I have told my friends before that the jQuery framework can be used to manipulate the attributes of elements in HTML, so what is displayed and hidden above is just a div, not a picture. Now I will tell you how to manipulate the attributes of an element to make it appear or hide!

There are three ways to show and hide element objects in the jQuery framework, namely "show and hide by default", "show and hide by sliding", and "show and hide by fading in and out". Next we will introduce these three methods respectively.

1. Display and hide by default

By default the method to display an element is

show([speed,[easing],[fn]])

The meaning of the parameters are:

• speed: The speed of the animation. One of three predefined values ​​("slow", "normal", "fast") or a number in milliseconds representing the duration of the animation (e.g. 1000)
• easing: used to specify the transition effect, the default is "swing", the available parameter is "linear". * swing: The animation is slow at first, fast in the middle, and slow again at the end. * linear: The animation is executed at a constant speed
• fn: The function to be executed when the animation is complete, once for each element.

At the same time, one thing to remind you here is that the above three parameters are optional. If you do not set them, they will be executed with the default values.

The following example code:

// Display the div
 $("#showDiv").show("slow","swing");
 Linear Constant Speed

The default way to hide an element is

hide([speed,[easing],[fn]])

The meaning of the parameters is the same as in the show method. The same three parameters are optional. If they are not set, they will be executed with the default values. Here we add a final execution function to pop up a window "Hidden...".

The following example code:

//Hide the div
$("#showDiv").hide("slow","swing",function () {
    alert("Hidden...")
});

So do we have to define a method for element display and another method for element hiding every time? Not really. jQuery has taken this into full consideration, so there is a method that can both display and hide.

toggle([speed],[easing],[fn])

When this method is called, the element will be hidden, similar to the hide() method. When it is called again, the element will be displayed again, similar to the show() method. The meaning of the parameters is the same as above

The example code is as follows:

//Can be displayed or hidden$("#showDiv").toggle("slow","linear");

The effect achieved by default is as shown below:

​

2. Slide to show and hide

We should be able to tell from the name that the difference between the sliding mode and the default mode is actually the different animations when showing and hiding. Next, we will introduce how to show, hide, and both show and hide elements in the sliding mode.

Display in sliding mode

slideDown([speed],[easing],[fn])

Example code:

//Slide to display div
$("#showDiv").slideDown("slow");

Hide by sliding

slideUp([speed,[easing],[fn]])

Example code:

// Slide to hide the div
$("#showDiv").slideUp("fetch");

Slide mode to show and hide:

slideToggle([speed],[easing],[fn])

Example code:

// Slide to show or hide $("#showDiv").slideToggle("slow");

The effect achieved in sliding mode is as shown below:

​

3. Display and hide by fading in and out

The display and hiding of elements in the fade-in and fade-out mode is actually the same as the above two methods, the only difference is the display effect.

The method used in the fade-in and fade-out mode is:

fadeIn([speed],[easing],[fn])

Implementation code:

// fade out div
$("#showDiv").fadeIn("slow")

Hiding in fade-in and fade-out mode

fadeOut([speed],[easing],[fn])

Implementation code:

// fade out hidden div
$("#showDiv").fadeOut("fetch");

Show and hide in fade-in and fade-out mode

fadeToggle([speed,[easing],[fn]])

Implementation code:

// Fade in and out to show and hide divs
$("#showDiv").fadeToggle("fetch")

The effect of running in fade-in and fade-out mode is as follows:

​

The above is how to display and hide elements using the jQuery framework. Here is the complete implementation code for the above example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Default display and hiding animation</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <script>
        function hideFn() {
            //Hide the div
            /*$("#showDiv").hide("slow","swing",function () {
                alert("Hidden...")
            });*/

            // Slide to hide the div
            $("#showDiv").slideUp("fetch");

            // fade out hidden div
            // $("#showDiv").fadeOut("fetch");

        }
        
        function showFn() {
            // Display the div
            // $("#showDiv").show("slow","swing");
            // linear uniform speed // slide to display div
            // $("#showDiv").slideDown("slow");

            // fade out div
            $("#showDiv").fadeIn("slow")
        }
        
        function toggleFn() {
            //Can be displayed or hidden// $("#showDiv").toggle("slow","linear");

            // Slide to show or hide // $("#showDiv").slideToggle("slow");

            // Fade in and out to show and hide divs
            $("#showDiv").fadeToggle("fetch")
        }
        
    </script>
    
</head>
<body>
<input type="button" value="Click the button to hide the div" onclick="hideFn()">
<input type="button" value="Click the button to display div" onclick="showFn()">
<input type="button" value="Click the button to switch div display and hide" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div show and hide
</body>
</html>

IV. Case: Automatic display and hiding of advertisements

Now that we know how to display and hide elements in the jQuery framework, we should apply it to actual cases. The following example shows how to automatically display and hide advertisements to further strengthen the practice of this technology.

What we want to achieve is, in a simple web page, the advertisement image will be displayed three seconds after the page is opened, and then the advertisement will be hidden after five seconds. Here, the operation of displaying and hiding the advertisement image is easy to implement according to the above explanation. So how should we implement delayed display and hiding?

Here we need to use a timer setTimeout (method, time) in js;

The first parameter of this method is a method name, such as the method for showing or hiding an image, and the second parameter is the number of milliseconds, which indicates how many seconds after the page is loaded that the method is executed.

Then according to this idea, we can write in the entry function of jQuery that the method of displaying the picture is called 3000 milliseconds after the page is loaded, that is, three seconds later; the method of hiding the picture is called 8000 milliseconds after the page is loaded, that is, eight seconds later, and the remaining five seconds in between are the time for displaying the picture.

Let's talk about the implementation of the above requirements. The complete code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Automatic display and hiding of advertisements</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--Introduce jQuery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        // Steps to delay display and hiding of images // 1. Call the timer setTimeout() method after the page is loaded // 2. Call the functions of displaying and hiding ads in the timer // 3. Use the show and hide methods to display and hide images // Set the entry function $(function () {
            // Display the image after a delay of 3 seconds setTimeout(adShow,3000);
            // Hide the image after 6 seconds setTimeout(adHide,8000);
        });
        // Display the image function adShow() {
            $("#ad").show("slow");
        }

        //Hide the image function adHide() {
            $("#ad").hide("fast");
        }

    </script>
</head>
<body>
<!-- Overall DIV -->
<div>
    <!-- Advertisement DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- Main text below -->
    <div id="content">
        Body part</div>
</div>
</body>
</html>

The effect is as follows:

The above are the details of the three ways to implement element display and hiding animations in the jQuery framework. For more information about jQuery display and hiding, please pay attention to other related articles on 123WORDPRESS.COM!