How to use jquery to gradually display images

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.

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.

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.

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

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

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

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.

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

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!