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?
$("#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.
Table of Contents
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">
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.
<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
Comments are closed.