JQuery fade effect with example
source link: https://www.laravelcode.com/post/jquery-fade-effect-with-example
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JQuery fade effect with example
jQuery provides easy ways to animate any element. One of the effect is fading effect. Fade effect workds as gradual increase and decrease in the opacity in the selected element. jQuery provides four method to create fade effects.
In this article, we will describe all methods one by one. So let's start from fadeIn() method.
jQuery fadeIn() method
jQuery fadeIn() method used to show hidden element in fade effect.
Syntax:
$(selector).fadeIn(duration, callback);
Parameters:
duration is string 'slow', 'fast' or milliseconds
callback is a optional function which executes after the fadeIn effect completes.
Example:
$('.normal').fadeIn();
$('#slow').fadeIn('slow');
$('div').fadeIn(1000, function() {
alert('fadeIn effect completed.');
});
jQuery fadeOut() method
jQuery fadeOut() method used to hide element in fade effect.
Syntax:
$(selector).fadeOut(duration, callback);
Parameters:
duration is string 'slow', 'fast' or milliseconds
callback is a optional function which executes after the fadeOut effect completes.
Example:
$('.normal').fadeOut();
$('div').fadeOut(1000);
$('#slow').fadeOut('slow', function() {
alert('fadeOut effect completed.');
});
jQuery fadeToggle() method
jQuery fadeToggle() method used to toggle elements fadeIn() method and fadeOut() method. It shows hidden elements and hide elements in fade effect.
Syntax:
$(selector).fadeToggle(duration, callback);
Parameters:
duration is string 'slow', 'fast' or milliseconds
callback is a optional function which executes after the fadeToggle effect completes.
Example:
$('.normal').fadeToggle();
$('div').fadeToggle(1000);
$('#slow').fadeToggle('slow', function() {
alert('fadeToggle effect completed.');
});
jQuery fadeTo() method
jQuery fadeTo() method used to set opacity of element in given value.
Syntax:
$(selector).fadeTo(duration, opacity, callback);
Parameters:
duration is string 'slow', 'fast' or milliseconds
opacity decimal between 0 and 1 where 0 will hide element and 1 will do nothing.
callback is a optional function which executes after the fadeTo effect completes.
Example:
$('.normal').fadeTo();
$('div').fadeTo(1000);
$('#slow').fadeTo('slow', function() {
alert('fadeTo effect completed.');
});
I hope it will help you.
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK