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.

The Code:

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

$(document).ready(function() {
    $('.fade-in').hide().fadeIn(1000);
});

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.