jQuery Effects

jQuery Effects


jQuery comes with a number of preset effects and the robust low-level
animation method for creating your own custom effects.
The preset effects include the following:
• Hiding and showing elements in a toggle fashion
• Scaling and simultaneously fading elements in and out of view
• Sliding up and down and toggling
• Fading in and out and to a specific opacity
All of the preset effects support speeds and callback functions to trigger upon
completion.
In addition to these predefined effects, there are also a number of utilities that can help
you take more control over your animations:
• :animated selector to assess whether an element is in the process of being animated
• The ability to turn off and on all effects across the board
• The ability to add to the animation queue with your own bespoke functions
• Function to change the entire queue of animations.

Sliding and Fading Elements in and out of View


Slide

The following are the slide methods :
• slideUp
• slideDown
• slideToggle



$(document).ready(function () {
$('#animate').click(function () {
$('.box').slideToggle('slow');
});
});


Fade


Fading 

has the following methods:

• fadeIn
• fadeOut
• fadeTo

With the exception of fadeTo, all these methods take speed as the first parameter and
a callback function as the second—both of which are optional. The callback function
is executed once the animation is complete, and the context is set to the element the
animation ran against; i.e., the this variable is the current element .
Because there’s no opacity toggle function, either we can use a combination of

fadeIn and fadeOut:


$(document).ready(function () {
$('#animate').click(function () {
var $box = $('.box');
if ($box.is(':visible')) {
$box.fadeOut('slow');
} else {
$box.fadeIn('slow');
}
});
});

or we can create our own fade toggle animation, using the fadeTo method:


$(document).ready(function () {
$('#animate').click(function () {
$('.box').fadeTo('slow', 'toggle');
});
});


However,it reads better for future maintenance if we use the animate method:


$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({ opacity : 'toggle' }, 'slow');
});
});


Both


If we want to toggle the height and opacity together, we can reuse the previous
solution and add the height to toggle at the same time. This would cause the box to
fade out and slide up at the same time:

$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({
opacity : 'toggle',
height: 'toggle'
}, 'slow');
});
});

hide and show 

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

toggle 

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

$("button").click(function(){
  $("p").toggle();
});

Adapted from jQuery Cookbook, W3Schools

Posted in: fade,hide,jQuery,jQuery Effects,show,slide