JQuery Fading Methods
Posted By : Rohit Goyal | 26-Dec-2016
You often worried about smooth fade effect of an element. This problem can be sort out jQuery Fade Method. There are total 4 cases. In this you will learn how we can add fading effects.
Let's start.
jQuery has four fade Methods:-
1) fadeOut()
2) fadeIn()
3) fadeToggle()
4) fadeTo()
1) Jquery fadeOut() Method
jQuery fade out method is used to fadeout a element
HTML:-
<div class="box"><button>Click</button></div>
CSS:-
.box{
height:200px;
width:300px;
background:#000;
}
set some height,width and backgroud of box by using above css.
Remember:-
First of all include the JQuery library file just above closing of body tag.The code are given below:
<script src="query-1.11.3.min.js" type="text/javascript"></script>
You can get the library file from www.jquery.com
Case-I:- simple fadeout
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeOut();
});
});
</script>
In this case by clicking on button the box will simple fade out.
Case-II:- slow fadeout
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeOut("slow");
});
});
</script>
In this case by clicking on button the box will fade out slowly
Case-III:- fast fadeout
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeOut("fast");
});
});
</script>
In this case by clicking on button the box will fade out fast
CaseIV:- set time for fadeout
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeOut("5000");
});
});
</script>
We can also set time for the fadeout manually. By using above code
2) Jquery fadeIn() Method
jQuery fade In method is used to fadein a element
There is only changes in jQuery.Rest of the code will remain same
Case-I:- simple fadein
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeIn();
});
});
</script>
In this case by clicking on button the box will simple fade In.
Case-II:- slow fadein
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeIn("slow");
});
});
</script>
In this case by clicking on button the box will fade In slowly
Case-III:- fast fadein
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeIn("fast");
});
});
</script>
In this case by clicking on button the box will fade In fast
CaseIV:- set time for fadein
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeIn("5000");
});
});
</script>
We can also set time for the fadein manually.By using above code
3) jQuery fadeToggle() Method
jQuery fade Toggle method is used to fadein and fadeout both.It means the if element is showing
it will automatically do the the functioning of fadeout and if element is hide it will do the
functioning of fadein.
Case-I:- fadeToggle
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeToggle();
});
});
</script>
In this case by clicking on button the box if box css property will set to display:none.Then above jQuery will do the functioning of fadeIn().
and if box are showing then it performing functioning of fadeout().If you want to give box property to display none.
You can the the following code into your css.
CSS:-
.box{
display:none;
}
4) jQuery fadeTo() Method
jQuery fade To method is used to fadeto a element up to a certain limit.
Case-I:- fadeTo
jQuery->
<script>
$(document).ready(function(){
$('button').click(function(){
$(".box").fadeTo("slow", 0.15);
});
});
</script>
the above code will fade the box up to 0.15 opacity.After that it will note fade.
That's it.
you are now learnt the complete jQuery fading Methods.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.