Abstract:There are three ways to display and hide elements in jQuery framework, which are “default display and hide”, “slide display and hide”, and “fade in and out display and hide”.

This article is shared from the Huawei cloud community “jQuery framework to achieve element display and hidden animation [with case analysis]”, the original author: grey small monkey.

Let’s start with a simple animation:

I have told my friends before that the jQuery framework can be used to operate the attributes and other elements in HTML very well, so what is displayed and hidden on it is just a div, not an image. Next, I will tell you how to operate on the attributes of the element, so that it is displayed or hidden!

There are three ways to display and hide elements in jQuery framework, which are “default display and hide”, “slide display and hide”, and “fade in and out display and hide”. Next, we will introduce each of these three methods.

First, the default mode of display and hide

The default method for displaying the element is


The parameters are as follows:

  • Speed: The speed of the animation. Three predefined values (“slow”,”normal”, “fast”) or milliseconds representing the length of the animation (e.g., 1000)
  • Much:The default is “swing” and the parameter “linear” is used to specify the switch effect.Swing: Animation execution is slow first, fast in the middle, and slow last.Linear: Animation is executed at a constant speed
  • Fn: A function that executes when the animation is complete, once per element.

It is also important to note that the above three parameters are optional, and if they are not set, they will be the default values.

The following example code:

// show div $("#showDiv").show("slow","swing"); Linear uniform

The default way to implement element hiding is


The parameters have the same meaning as in the show method. Again, the three parameters are optional, and if they are not set, they will be executed at the default value. Here we add a final execution function that pops up a window “Hide…” .

The following example code:

/ / hidden div $(" # showDiv "). Hide (" missile ", "swing", function () {alert (" hides the..." )});

So do we have to define one method for element display and one method for element hiding each time? Not really, jQuery takes this into account, so there is a method that can be both displayed and hidden


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

The example code is as follows:

$("#showDiv"). Toggle ("slow","linear");

The effect is shown in the default mode:

Two, slide display and hide

From the name, we can also tell that the difference between the default mode and the slider mode is actually the difference between the animation when the elements are shown and hidden. Let’s introduce the following: slider mode to show, hide, both show and hide elements.

Slide mode under the display


Example code:

Div $("#showDiv").slideDown("slow");

Slide mode under hiding


Example code:

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

Slide to both show and hide:


Example code:

$("#showDiv").slideLoggle ("slow");

The effect of sliding mode is shown in the figure below:

Fade in and out display and hide

Fade-in and Fade-out display and hide elements are actually the same as the above two methods, the only difference is that the display effect is different.

Fade-in and Fade-out mode display using the method:


Implementation code:

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

Fade in and out mode to achieve hiding


Implementation code:

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

Fade in and out mode is both displayed and hidden


Implementation code:

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

The effect of fading in and out mode is as follows:

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

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utf-8 "> <title> <script type="text/javascript" SRC ="... / js/jquery - 3.3.1. Min. Js "> < / script > < script > function hideFn () {/ / hidden div / * $(" # showDiv"). Hide (" missile ", "swing", function () Alert (" hidden...") )}); $("#showDiv").slideUp("fetch"); // Fade out the hidden div // $("#showDiv").fadeOut("fetch"); {} function showFn () / / show the div / / $(" # showDiv "). Show (" missile ", "swing"); / / linear uniform/slide/show the div / / $(" # showDiv "). SlideDown (" missile "); / / out shows div $(" # showDiv "). FadeIn (" missile ")} function toggleFn () {/ / can hide/show / $(" # showDiv "). Toggle (" missile ", "linear"); Sliding can hide/show / / / $(" # showDiv "). SlideToggle (" missile "); $("#showDiv").fadetoggle ("fetch")} </script bb0 </head> <body> <input type="button" value=" " OnClick ="showFn()" onClick ="showFn()" onClick ="showFn()" onClick ="showFn()" onClick ="showFn()" onClick ="showFn()" "> <div id="showDiv" style="width:300px; height:300px; Background :pink"> div </div> </body> </ HTML > </div

Case study: automatic display and hiding of advertisements

Now that we know how to display and hide elements in the jQuery framework, it’s time to apply it to a real case. Let’s further practice this technique by realizing the automatic display and hiding of advertisements.

We should realize that in a simple web page, the page will open three seconds advertising figure display, display advertising hidden again after 5 seconds, to the operation of the advertising picture show and hide here, according to the interpretation of the above, realize the picture now should be to show and hide the easily, so what should be how to realize the delay show and hide?

Here we use a timer in JS called setTimeout;

The first argument to this method is a method name, such as a method to show or hide an image, and the second argument is a number of milliseconds, which indicates how many seconds the method will be executed after the page has loaded.

The jQuery entry function will call the display image method after 3000 milliseconds, or three seconds after the page is loaded. Eight thousand milliseconds after the page loads, or eight seconds, the hidden image method is called, with five seconds remaining to display the image.

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

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utf-8 "> </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, call timer setTimeout() method after page loading // 2, call timer function to show ads and hide ads $(function () {setTimeout(adShow,3000); $(function ()) {$(function (); SetTimeout (adHide,8000); }); / / display images function adShow () {$(" # AD "). Show (" missile "); } / / hide the image function adHide () {$(" # AD "). Hide (" fast "); } </script> </head> <body> <! -- whole DIV --> < DIV > <! < DIV id=" AD "style="display: none;" style="display: none; > <img style="width:100%" src=".. /img/adv.jpg" /> </div> <! - below the body -- -- > < div id = "content" > body < / div > < / div > < / body > < / HTML >

The effect is as follows:

Click on the attention, the first time to understand Huawei cloud fresh technology ~