Teach you three jQuery frameworks to achieve element display and hide animation methods

Abstract: has 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 fade in and out".

This article is shared from the HUAWEI cloud community " jQuery framework to achieve element display and hiding animation [with case study] ", the original author: Gray Little Ape.

First look at a simple animation rendering:

I have also talked to my friends before that using the jQuery framework can perform operations on the attributes of elements in html, so what is displayed and hidden above is only a div, not a picture. Next, I will talk to my friends about how to manipulate the attributes of elements to make them show or hide!

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

1. Show and hide by default

The way to display elements under the default method is

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

The meaning of the parameters is:

• speed: animation speed. Three predefined values ("slow", "normal", "fast") or milliseconds representing the duration of the animation (eg: 1000)
• easing: used to specify the switching effect, the default is "swing", and the available parameter is "linear". swing: When the animation is executed, the effect is slow at first, fast in the middle, and slow at the end. linear: The speed is constant when the animation is executed
• fn: The function to be executed when the animation is completed, and it is executed once for each element.

At the same time, here is a reminder that the above three parameters are optional. If they are not set, they will be executed with default values.

The following example code:

 // 显示div
 $("#showDiv").show("slow","swing");
 linear 匀速

The way to realize element hiding in the default mode 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 default values. Here we add a final execution function, let it pop up a window "hidden...".

The following example code:

// 隐藏div
$("#showDiv").hide("slow","swing",function () {
    alert("隐藏了...")
});

So do we have to define a method for element display and another method for element hiding every time? No, jQuery also fully considers this point, so there is a method that can achieve both display and hiding

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:

// 能显示能隐藏
 $("#showDiv").toggle("slow","linear");

The effect achieved in the default mode is as shown in the figure:

2. Slide to show and hide

From the name, we should also be able to distinguish that the difference between the sliding mode and the default mode is that the animation is different when displaying and hiding . Let’s introduce how to display, hide, and hide elements in the sliding mode. Both show and hide,

Display in sliding mode

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

Example code:

// 滑动显示div
$("#showDiv").slideDown("slow");

Hide in sliding mode

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

Example code:

// 滑动隐藏div
$("#showDiv").slideUp("fetch");

Both show and hide in sliding mode:

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

Example code:

// 滑动能显示能隐藏
$("#showDiv").slideToggle("slow");

The effect achieved in sliding mode is shown in the figure:

3. Fade in and fade out mode to show and hide

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 that the display effect is different.

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

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

Implementation code:

// 淡出显示div
$("#showDiv").fadeIn("slow")

Hide in fade-in and fade-out mode

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

Implementation code:

// 淡出隐藏div
$("#showDiv").fadeOut("fetch");

Both show and hide in fade-in and fade-out mode

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

Implementation code:

// 淡入淡出显示和隐藏div
$("#showDiv").fadeToggle("fetch")

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

The above is the method of using the jQuery framework to display and hide elements. The following is the complete implementation code of the above example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>默认方式显示和隐藏动画</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <script>
        function hideFn() {
            // 隐藏div
            /*$("#showDiv").hide("slow","swing",function () {
                alert("隐藏了...")
            });*/

            // 滑动隐藏div
            $("#showDiv").slideUp("fetch");

            // 淡出隐藏div
            // $("#showDiv").fadeOut("fetch");

        }
        
        function showFn() {
            // 显示div
            // $("#showDiv").show("slow","swing");
            // linear 匀速

            // 滑动显示div
            // $("#showDiv").slideDown("slow");

            // 淡出显示div
            $("#showDiv").fadeIn("slow")
        }
        
        function toggleFn() {
            // 能显示能隐藏
            // $("#showDiv").toggle("slow","linear");

            // 滑动能显示能隐藏
            // $("#showDiv").slideToggle("slow");

            // 淡入淡出显示和隐藏div
            $("#showDiv").fadeToggle("fetch")
        }
        
    </script>
    
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

4. Case: Automatic display and hiding of advertisements

Now that we know how to display and hide elements under the jQuery framework, we should apply it to actual cases. The following examples will realize the automatic display and hiding of advertisements to further strengthen the technology. practice.

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

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

The first parameter of this method is a method name, such as the method of displaying or hiding pictures, and the second parameter is the number of milliseconds, which indicates how many seconds to execute the method after the page is loaded.

Then according to the idea, we can write in the entry function of jQuery, the page load is completed 3000 milliseconds, that is, the method to display the picture is called after three seconds; the page load is completed 8000 milliseconds, that is, the method to hide the picture is called after eight seconds. The five seconds left in the middle is the time to display the picture.

Let's talk about the realization of the above requirements, the complete code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        // 图片延时显示和隐藏的步骤
        // 1、在页面加载完成之后调用定时器setTimeout()方法
        // 2、在定时器中调用显示广告和隐藏广告的函数
        // 3、使用show和hide方法实现图片的显示和隐藏

        // 设置入口函数
        $(function () {
            // 延时3秒后显示图片
            setTimeout(adShow,3000);
            // 延时6秒后隐藏图片
            setTimeout(adHide,8000);
        });
        // 显示图片
        function adShow() {
            $("#ad").show("slow");
        }

        // 隐藏图片
        function adHide() {
            $("#ad").hide("fast");
        }

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

The effect is as follows:

Click to follow, and learn about Huawei Cloud's fresh technology for the first time~