jQuery: Fade in image on load - Learn how

If you're looking to add a touch of elegance to your website, consider fading in your images on load. With jQuery, this is an easy effect to achieve.

  1. The Code:
  2. Putting it all Together:

The Code:

<img src="image.jpg" class="fade-in" />

$(document).ready(function() {

The above code uses the hide() and fadeIn() methods to initially hide the image and then fade it in over a period of 1000 milliseconds (1 second).

It's important to note that the fadeIn() method only works on elements with the display property set to none. The hide() method takes care of this by setting the display property to none initially.

You can adjust the duration of the fade in effect by changing the value passed to the fadeIn() method.

Putting it all Together:

Simply add the above code to your website's JavaScript file or inside a <script> tag on your HTML page. Make sure to include the jQuery library before this code in order for it to work.

Then, add the class fade-in to any <img> tags you want to fade in on load.

And that's it! With just a few lines of code, you can add a subtle yet eye-catching effect to your website.

Click to rate this post!
[Total: 0 Average: 0]

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up

Below we inform you of the use we make of the data we collect while browsing our pages. You can change your preferences at any time by accessing the link to the Privacy Area that you will find at the bottom of our main page. More Information