What are JQuery effects?
jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading, sliding, hiding/showing and animation effects. jQuery provides many methods for effects on a web page.
jQuery provides many methods for effects on a web page. A complete list of jQuery effect methods are given below:
- jQuery hide()
The jQuery hide() method is used to hide the selected elements.
Syntax:
$(selector).hide();
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of hide() effect.
Let’s take an example to see the jQuery hide effect.
Example:
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
});
</script>
- jQuery show()
The jQuery show() method is used to show the selected elements.
Syntax:
$(selector).show();
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of show() effect.
Let’s take an example to see the jQuery show effect.
Example:
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>
- jQuery toggle()
The jQuery toggle() is a special type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.
Syntax:
$(selector).toggle();
$(selector).toggle(speed, callback);
$(selector).toggle(speed, easing, callback);
$(selector).toggle(display);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of toggle() effect.
display: If true, it displays an element. If false, it hides the element.
Let’s take an example to see the jQuery toggle effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div.d1”).toggle();
});
});
</script>
- jQuery fadeIn()
jQuery fadeIn() method is used to fade in the element.
Syntax:
$(selector).fadein();
$(selector).fadeIn(speed,callback);
$(selector).fadeIn(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of fadein() effect.
Let’s take an example to demonstrate jQuery fadeIn() effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
});
</script>
- jQuery fadeOut()
The jQuery fadeOut() method is used to fade out the element.
Syntax:
$(selector).fadeOut();
$(selector).fadeOut(speed,callback);
$(selector).fadeOut(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of fadeOut() effect.
Let’s take an example to demonstrate jQuery fadeOut() effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
});
</script>
- jQuery fadeToggle()
jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it will make them faded out and if they are faded out it will make them faded in.
Syntax:
$(selector).fadeToggle();
$(selector).fadeToggle(speed,callback);
$(selector).fadeToggle(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of fadeToggle() effect.
Let’s take an example to demonstrate jQuery fadeToggle() effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
});
</script>
- jQuery fadeTo()
jQuery fadeTo() method is used to fading to a given opacity.
Syntax:
$(selector).fadeTo(speed, opacity);
$(selector).fadeTo(speed, opacity, callback);
$(selector).fadeTo(speed, opacity, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
Opacity: It specifies the opacity. The opacity value ranges between 0 and 1.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of fadeToggle() effect.
Let’s take an example to demonstrate jQuery fadeTo() effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”, 0.3);
$(“#div2”).fadeTo(“slow”, 0.4);
$(“#div3”).fadeTo(“slow”, 0.5);
});
});
</script>
- jQuery slideDown()
jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed);
$(selector).slideDown(speed, callback);
$(selector).slideDown(speed, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of slideDown() effect.
Let’s take an example to demonstrate jQuery slideDown() effect.
Example:
<script>
$(document).ready(function(){
$(“#flip”).click(function(){
$(“#panel”).slideDown(“slow”);
});
});
</script>
- jQuery slideUp()
jQuery slideDown() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed);
$(selector).slideUp(speed, callback);
$(selector).slideUp(speed, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of slideUp() effect.
Let’s take an example to demonstrate jQuery slideUp() effect.
Example:
<script>
$(document).ready(function(){
$(“#flip”).click(function(){
$(“#panel”).slideUp(“slow”);
});
});
</script>
- jQuery slideToggle()
jQuery slideToggle () method is used to toggle between slideUp() and slideDown() method. If the element is slide down, it will slide up the element and if it is slide up, it will slide down.
Syntax:
$(selector).slideToggle(speed);
$(selector).slideToggle(speed, callback);
$(selector).slideToggle(speed, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of slideToggle() effect.
Let’s take an example to demonstrate jQuery slideToggle() effect.
Example:
<script>
$(document).ready(function(){
$(“#flip”).click(function(){
$(“#panel”).slideToggle(“slow”);
});
});
</script>
- jQuery animate()
The jQuery animate() method provides you with a way to create custom animations.
Syntax:
$(selector).animate({params}, speed, callback);
Here, the params parameter defines the CSS properties to be animated.
The speed parameter is optional and specifies the duration of the effect. It can be set as “slow”, “fast” or milliseconds.
The callback parameter is also optional and it is a function which is executed after the animation completes.
Let’s take a simple example to see the animation effect.
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left: ‘450px’});
});
});
</script>
- jQuery delay()
The jQuery delay() method is used to delay the execution of functions in the queue. It is a best method to make a delay between the queued jQuery effects. The jQUery delay () method sets a timer to delay the execution of the next item in the queue.
Syntax:
$(selector).delay (speed, queueName)
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
queueName: It is also an optional parameter. It specifies the name of the queue. Its default value is “fx” the standard queue effect.
Let’s take an example to see the delay effect:
Example:
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).delay(“slow”).fadeIn();
});
});
</script>
