Abstract: There are three ways to show and hide element objects in jQuery framework, which are “default mode show and hide”, “slide mode show and hide”, “fade in and fade out show and hide”.

This article is shared from Huawei cloud community “jQuery framework implementation Element Show and hide animation [attached case analysis]”, the original author: Grey Little Ape.

Let’s start with a simple animation:

I have also told my friends before that jQuery framework can be used to operate the attributes of elements in HTML, so what is shown and hidden above is only a div, not a picture. How to manipulate the attributes of an element to make it show or hide!

There are three ways to show and hide element objects in jQuery framework: ** “Default show and hide”, “slide Show and hide”, and “Fade in and out show and hide”. ** Next we will introduce each of these three methods.

1. Display and hide by default

The way to display elements under the default method is

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

The meanings of parameters are as follows:

  • Speed: indicates the animation speed. Three predefined values (“slow”,”normal”,”fast”) or a number of milliseconds representing the animation time (e.g., 1000)
  • Easing: Used to specify the switching effect. The default is “swing” and the parameter “Linear” is available. * Swing: Animation execution is slow, fast in the middle, and slow at the end. * Linear: The animation executes at a constant speed
  • Fn: Function that is executed when the animation is complete, once per element.

Note that the above three parameters are optional, and if not set, the default values will be used.

Example code:

// display div $("#showDiv"). Show ("slow","swing"); Linear uniformCopy the code

The default way to implement element hiding is

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

The parameters have the same meanings as those in the show method. Also, the three parameters are optional, and if they are not set, the default values will be used. Here we add a final execution function that pops up a “hide…” window. .

Example code:

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

So should we define a method for element display and a method for element hiding every time? No, jQuery takes this into account, so there is a way to hide and show

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

When called, the element is hidden, similar to the hide() method, and when called again, the element is displayed, similar to the show() method.

The parameters have the same meanings as the preceding ones

Example code is as follows:

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

By default, the result is shown as follows:

Slide to show and hide

From the name we should also be able to distinguish, ** sliding mode and the default mode of the difference is actually show and hide the animation is not the same, ** below we will introduce the sliding mode for elements to show, hide, both show and hide,

Slide display

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

Example code:

// Slide to display div $("#showDiv").slidedown ("slow");Copy the code

Slide to hide

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

Example code:

// Slide to hide div $("#showDiv").slideup ("fetch");Copy the code

Slide to show and hide:

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

Example code:

// Slide to show and hide $("#showDiv"). SlideToggle ("slow");Copy the code

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

3. Fade in and out to show and hide

Fade-in and fade-out mode to show and hide elements is actually the same as the above two methods, the difference is just the effect of the display is not the same.

The method used for the fade-in display is:

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

Implementation code:

Div $("#showDiv").fadein ("slow")Copy the code

Fade in and out to hide

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

Implementation code:

$("#showDiv").fadeout ("fetch");Copy the code

Both show and hide in fade-in

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

Implementation code:

Div $("#showDiv").fadetoggle ("fetch")Copy the code

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

This is the jQuery framework for showing and hiding elements. Here is the complete implementation code for the above example:

<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title> Default way to show and hide animation </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..." )}); */ / slide to hide div $("#showDiv").slideup ("fetch"); $("#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 "); Div $("#showDiv").fadetoggle ("fetch")} </script> </head> <body> <input type="button" value= Onclick ="hideFn()"> <input type="button" value=" Onclick ="toggleFn()"> <div id="showDiv" style="width:300px; height:300px; </div> </body> </ HTML >Copy the code

Iv. Cases: the automatic display and hiding of advertisements

Now that we know how to show and hide elements in the jQuery framework, it’s time to apply it to a real case. Let’s take this technology a step further by implementing the automatic show and hide example for ads.

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?

This is going to use a timer in JS called setTimeout;

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

Call the image display method in 3000 milliseconds after the page is loaded. 8000 milliseconds after the page is loaded, that is, eight seconds after the call to hide the image method, the remaining five seconds is the time to display the image.

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

<! </title> <style> #content{width:100%; height:500px; background:#999} </style> <! <script type="text/javascript" SRC =".. // call timer setTimeout() method after page loading is complete // Call timer function to show advertisement and hide advertisement $(function () {setTimeout(adShow,3000); 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; > <img style="width:100%" src=".. /img/adv.jpg" /> </div> <! - below the body -- -- > < div id = "content" > body < / div > < / div > < / body > < / HTML >Copy the code

The effect is as follows:

Click to follow, the first time to learn about Huawei cloud fresh technology ~