Simple JavaScript Fade Effect Animation Using Jquery

You can create a simple fade effect in image slideshow using the simplest effects, fadeIn() and fadeOut() methods. These methods simply animate the CSS opacity property to show or hide an element.

Both fadeIn() and fadeOut() methods accept optional duration and callback arguments. And another method fadeTo() expects a target opacity argument and animates the change from the element’s current opacity to the target.

For the fadeTo() method, the duration is required as the first argument and the target opacity is required as the second argument. The callback function is an optional third argument.  Here I have written codes for creating simple JavaScript fade effect animation using Jquery. It will help you to create awesome image animations for your website or blog.

Read Also: How to Create Simple JavaScript Fade Effect Animation?

Here are some examples that invoke methods for fade effect animation. The first image has fadeIn animation, the second image has fadeOut() animation and the third animation has fadeTo() animation.

$("#img1").fadeIn(2000);
$("#img2").fadeOut(3000);
$("#img3").fadeTo(1000, 0.33);

Now, we will go in detail how to show fadeIn, fadeOut and fadeTo effects animation using jQuery.

Creating FadeIn Effect Animation

Here we will show how to create fadeIn effect animation with an example. For this, you have to write the following scripts including the fadeIn() method mentioned above.

For more detail see the following example. In the example below, when the button with id “btn1” was clicked the image having id “img1” will show the fade effect animation for 2 seconds.

<script>
  $(document).ready(function(){
    $(#btn1).click(function () {
      $("#img1").fadeIn(2000);
    });
  });
  </script>
<input type=button id="btn1" value="Start FadeIn"/>
<img id="img1" src="img1.jpg"> 

Read Also: How To Create Simple Image Slideshow Using JavaScript?

Creating FadeOut Effect Animation 

Here we will show how to create fadeOut effect animation with an example. For this, you have to write the following scripts including the fadeOut() method mentioned above.

For more detail see the following example. In the example below, when the button with id “btn2” was clicked the image having id “img2” will show the fade effect animation for 3 seconds.

<script>
  $(document).ready(function(){
    $(#btn2).click(function () {
      $("#img2").fadeOut(3000);
    });
  });
  </script>
<input type=button id="btn2" value="Start FadeOut"/>
<img id="img2" src="img2.jpg"> 

Creating FadeTo Effect Animation

Here we will show how to create fadeTo effect animation with an example. For this, you have to write the following scripts including the fadeTo() method mentioned above.

For more detail see the following example. In the example below, when the button with id “btn3” was clicked the image having id “img3” will show the fade effect animation for 1 second and moves to 33% opacity.

<script>
  $(document).ready(function(){
    $(#btn3).click(function () {
      $("#img3").fadeTo(1000, 0.33);
    });
  });
  </script>
<input type=button id="btn3" value="Start FadeOut"/>
<img id="img3" src="img3.jpg">

Read Also: How to Add Multiple Slideshows on One Page Using Javascript

Creating Image Slideshow With Fade Effect Animation

You can create the image slideshow applying the different fade effect animations described above. Here we have created the image slideshow along with fadeIn() and fadeOut() methods using jQuery.

Just copy and paste the code below where you want to place slideshow and just change the location of the images. It will work fine for you also on your project.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
.fade {
box-shadow:1px 1px 5px 2px #6DC83C;
position:relative;
width:500px;
height: 300px;
border-radius:19px;
left:80px;
}
.fade img {
border-radius:19px;
position:absolute;
left:0;
top:0;
}
</style>
<script>
$(function(){
 $('.fade img:gt(0)').hide();
 setInterval(function(){$('.fade :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000);
});
</script>
<div class="fade">
 <img src="image_1.gif">
 <img src="image_2.gif">
 <img src="image_3.gif">
</div>

Read Next: How to Create JavaScript Image Slideshow with Links