over 8 years ago
Hello Readers,
jQuery provides a simple way to apply wonderful effects in your application. jQuery effects methods are very amazing and easy to implement with minimum configuration. So in today's post, we will discuss the jQuery effects methods.
Let's have a look on these methods and their examples:
For Example:
$(document).ready(function(){
$("#hide").click(function(){ // Hiding the HTML element
$("p").hide();
});
$("#show").click(function(){ // Showing the HTML element
$("p").html('I am back');
$("p").show();
});
});
$(document).ready(function(){
$("#hide").click(function(){ // Hiding the HTML element
$("p").hide();
});
$("#show").click(function(){ // Showing the HTML element
$("p").html('I am back');
$("p").show();
});
});
In the above example, we are simply hiding and showing an HTML element. Both the methods have two optional parameters. First one is speed so that you can specify the speed of hiding and showing of HTML element and the second one is callback parameter which is a function. Speed can be specified with these value: It can be "fast", "slow", or in milliseconds.
Note: This callback method will execute after the hide() and show() method completes.
For Example:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000, function(){//Hiding with speed 1000 ms and callback function
alert("Hiding complete");
});
});
$("#show").click(function(){
$("p").html('I am back');
$("p").show(500, function(){//Showing with speed 500 ms and callback function
alert("Showing complete");
});
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000, function(){//Hiding with speed 1000 ms and callback function
alert("Hiding complete");
});
});
$("#show").click(function(){
$("p").html('I am back');
$("p").show(500, function(){//Showing with speed 500 ms and callback function
alert("Showing complete");
});
});
});
For Example:
This method has two optional parameters. First one is speed so that you can specify the speed of hiding or showing of HTML element and the second one is callback parameter which is a function. Speed can be specified with these value: It can be "fast", "slow", or in milliseconds.
Note: This callback method will execute after the toggle() method completes.
For Example:
For Example:
This method has two optional parameters. First one is speed so that you can specify the speed of fade in effect of HTML element and the second one is callback parameter which is a function. Speed can be specify with following value: It can be "fast", "slow", or in milliseconds.
Note: This callback method will execute after the fadeIn() method completes.
For Example:
For example:
This method has two optional parameters. First one is speed so that you can specify the speed of fade out effect of HTML element and the second one is callback parameter which is a function. Speed can be specify with following value: It can be "fast", "slow", or in milliseconds.
Note: This callback method will execute after the fadeOut() method completes.
For Example:
Note: This callback method will execute after the fadeToggle() method completes.
For Example:
For Example:
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow", 0.15); // fadeTo() methos with slow speen and 0.15 opacity.
});
});
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow", 0.15); // fadeTo() methos with slow speen and 0.15 opacity.
});
});
These are the amazing effects with simple configuration to make your application more attractive.Hope this will help you. :)
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)