Simple JavaScript Fade Effect Animation Using Jquery

You can create simple fade effect in image slideshow using simplest effects, fadeIn() and fadeOut(), which 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 ast 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, which may help you to create awesome image animations for your website or blog.

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

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

Here are some examples to show fadeIn, fadeOut and fadeTo effects using jQuery.

Example of FadeIn Effect

<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">

$(document).ready(function(){
$(“#btn1”).click(function(){
$(“#img1”).fadeIn();
});
});

Example of FadeOut Effect

<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">

$(document).ready(function(){
$(“#btn2”).click(function(){
$(“#img2”).fadeOut(3000);
});
});

Example of FadeTo Effect

<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">

$(document).ready(function(){
$(“#btn3”).click(function(){
$(“#img3”).fadeTo(3000,0.33);
});
});

Code for Creating Simple JavaScript Fade Effect Animation Using Jquery

Just copy and paste the code below where you want to place slideshow and change the location of the images.

<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;

}

.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');}, 5000);
});

</script>


<div class="fade">
 <img src="image_1.gif">
 <img src="image_2.gif">
 <img src="image_3.gif">
</div>

Preview for JavaScript Fade Effect Animation Using Jquery

.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;

}

$(function(){
$(‘.fade img:gt(0)’).hide();
setInterval(function(){$(‘.fade :first-child’).fadeOut(3000).next(‘img’).fadeIn(3000).end().appendTo(‘.fade’);}, 4000);
});