How to achieve fade in and fade out effect in jquery

coldplay.xixi
Release: 2021-01-18 17:42:49
Original
4256 people have browsed it

The jquery method to achieve the fade-in and fade-out effect: first create a new text document and introduce jquery; then use the method [fadeIn()] to fade in the hidden elements; finally use the method [fadeOut()] to fade out the visible elements.

How to achieve fade in and fade out effect in jquery

The operating environment of this tutorial: Windows 7 system, jquery version 3.2.1, Dell G3 computer.

How to achieve the fade-in and fade-out effect with jquery:

1. Create a new text document for code display and writing, as shown in the figure;

How to achieve fade in and fade out effect in jquery

2. Create two divs with IDs div1 and div2, as shown in the figure;

How to achieve fade in and fade out effect in jquery

3. Introduce jquery.js and connect It will be used next, as shown in the picture;

How to achieve fade in and fade out effect in jquery

4,fadeIn()method can fade in the hidden elements, as shown in the picture;

How to achieve fade in and fade out effect in jquery

5,fadeOut()method can fade out visible elements, as shown in the figure;

How to achieve fade in and fade out effect in jquery

6,fadeToggle()method, if hidden, fade in, if visible, fade out;

How to achieve fade in and fade out effect in jquery

7,fadeTo ("slow",0.4), as shown in the figure, can gradient to a given opacity

How to achieve fade in and fade out effect in jquery

Related learning recommendations:javascript Video tutorial

The above is the detailed content of How to achieve fade in and fade out effect in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!