Home  >  Article  >  Web Front-end  >  How to use jquery to gradually display images

How to use jquery to gradually display images

coldplay.xixi
coldplay.xixiOriginal
2020-12-14 15:33:373404browse

How to use jquery to gradually display the image: First use the img tag to create an image and create a button button; then obtain the img object within the function, use the [fadeIn()] method, and set it within the method Specify the number of seconds to gradually display the image.

How to use jquery to gradually display images

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, thinkpad t480 computer.

How to use jquery to gradually display a picture:

1. Create a new html file, named test.html, to explain how to make a picture appear with jquery gradually revealed.

How to use jquery to gradually display images

2. In the test.html file, in the p tag, use the img tag to create an image, and set the id of the image to myimg, which is mainly used below to pass the id Get the img object.

How to use jquery to gradually display images

3. In the test.html file, set the css style of the img tag and set display to none to hide the image.

How to use jquery to gradually display images

4. In the test.html file, use the button tag to create a button with the button name "Picture gradually displayed".

How to use jquery to gradually display images

5. In the test.html file, bind the onclick event to the button button. When the button is clicked, execute the disimg() function.

How to use jquery to gradually display images

6. In the js tag, create the disimg() function. Within the function, obtain the img object through id(myimg) and use fadeIn( ) method allows the image to be displayed gradually. For example, set the image to be displayed gradually within 5 seconds.

How to use jquery to gradually display images

7. Open the test.html file in the browser and click the button to see the effect.

How to use jquery to gradually display images

Related free learning recommendations: javascript (video)

The above is the detailed content of How to use jquery to gradually display images. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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