Web page design of jQuery_3. jQuery effect

One, jQuery hide & show

In fact, we have said before that jQuery hiding is hidden through the .hide() method, let’s use it below

Run it to see the effect

As you can see, the p tag is hidden. We have seen this before. Let’s talk about this display. It shows that we are using .show(). Let’s take a look.

You can see that when you click to hide, the text is added to the display style. When you click to display, the text attribute display is gone, and there is only one style left.

Two, fade in and fade out

There are many ways to fade in and out, fadeIn(), fadeOut(), fadeToggle(), fadeTo(), let’s try them one by one

fadeIn ()

We can give this parameter value, like setting a specific value, or in English, we usually give a given value, the unit is milliseconds, and then we click

fadeOut()

The above in is to display, out is not to display, let’s take a look

As you can see, it is displayed now, we will see the effect after clicking

All hidden

The other two are similar, you can practice it yourself and draw inferences from one another.

Three, callback

This is an important concept. For example, we click a button to hide the thing first, and then output a paragraph. How do we do this? Here we need to use our callback, take a look

Then we click

After the div is completely hidden, the prompt box pops up by itself, here we are using the callback

The default is no, if there is, add it

Four, jQuery chain

Many times, we have to do more than one or two operations, and there may be multiple operations, but we can't say that we keep getting and then operating.

For example, we click the button to make the text red and bigger, here we are equivalent to doing two operations, let’s see how to do it

Then let’s click on the button to see the effect

It’s OK, this is the chain, everyone should also know that this is also a commonly used thing

 

First come here, everyone digests it, there are many kinds of effects, you can check the jQuery official website, if you have any questions, please contact me QQ: 2100363119

Guess you like

Origin blog.csdn.net/weixin_45908370/article/details/109166988