We can create great animations using jQuery. jQuery provides various methods to create animation effects in the web pages. We can use standard animation effects those are most frequently used and also we can customize the effects for better visuals. In this article, we’ll discuss about jQuery basic effects. Let’s discuss about three main methods which provides basic effects. i.e., .show(), .hide() and .toggle(). If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.
also read:
jQuery Effects
The following example shows, hides and toggles the display of a paragraph text using basic effects.
<html> <head> <style> .paragraph {font-size:20px;color:#0000cc} </style> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#show").click(function() { $("p").show(1000, function(){ console.log('Paragraph is shown.'); }); }); $("#hide").click(function() { $("p").hide(1000, function(){ console.log('Paragraph is hidden.'); }); }); $("#toggle").click(function() { $("p").toggle(1000); }); }); </script> </head> <body> <br/> <p>This is a simple paragraph text.</p><br/> <input type="button" id="show" value="Show"/> <input type="button" id="hide" value="Hide"/> <input type="button" id="toggle" value="Toggle"/> </body> </html>
When we click on the Hide button, the paragraph hides with slow transition effect. We also called a callback function once the hiding effect completes.
When we click on Show button the paragraph will be shown with slow transition effect as shown in the below. Again, the callback function is invoked once the showing effect is completed.
.show()
The .show() method displays the matched elements if they’re hidden. This method takes several arguments like duration. We can have a callback function to be invoked once the .show() method completes execution. In the following code, the value 1000 represents the duration of the animation.
$("p").show(1000, function(){ console.log('Paragraph is shown.'); });
.hide()
The .hide() method hides the matched elements if they’re in visible state. This method also takes several arguments like duration. The callback function is invoked once the .hide() method completes execution. In the following code, the value 1000 represents the duration of the animation.
$("p").hide(1000, function(){ console.log('Paragraph is hidden.'); });
.toggle()
The .toggle() method either displays or hides the matched elements based on their current state.
$("p").toggle(1000);
We can create basic animation effects using .show(), .hide() and .toggle() methods in jQuery. These three methods have an numeric argument to represent the duration of the animation. The default value is 400. The greater the duration the longer the animation runs. We can also have callback functions to these methods which is called once the method completes execution.
Quick Summary of Other jQuery Effects
.animate()
The .animate() method performs an animation on CSS properties. The animation will be peformed towards to given CSS properties.
$('#myDiv').animate({ opacity: .5, width: 'linear', height: '75%' }, 8000, function() { console.log('animate() completed); });
.queue()
The .queue() method shows or manipulates the sequence of functions to be executed on the matched elements. We can have a number of functions to exeucte in a queue as shown below and the functions will be executed sequentially.
function myAnimation() { myDiv.animate({left:'+=10'},3000); myDiv.show("slow"); myDiv.hide("slow"); myDiv.animate({right:'+=20'},3000); }
The default name of the queue is ‘fx’ which is the standard effects queue.
.clearQueue()
The .clearQueue() method removes all functions from the queue those are not yet executed.
$("#animationDiv").clearQueue();
.delay()
The .delay() method delays the execution of the functions in the queue by putting a timer.
$("#animationDiv").show("slow").delay(1000).fadeIn(500);
.dequeue()
The .dequeue() method executes the next function in the queue. When called, the next function in the queue will be removed from queue and then executed. In order to continue the sequence of execution, this function in turn should call .dequeue().
function myAnimation() { myDiv.animate({left:'+=10'},3000); myDiv.show("slow"); myDiv.hide("slow"); myDiv.queue(function() { $(this).addClass('newitemclass'); $(this).dequeue(); }); myDiv.animate({right:'+=20'},3000); }
.finish()
The .finish() method completes the animation by stopping the currently running animation, and by removing all queued functions.
$("#animationDiv").finish();
jQuery.fx.interval
Indicates the rate of animations trigger (in milliseconds). This property can be used to adjust the number of frames per second in the animation. Default is 13 milliseconds. Making this value lower may have performance issue.
jQuery.fx.interval = 100; // animation code
jQuery.fx.off
This property disables all animations globally. When this property is defined with ‘true’, all the animation methods will stop effects by setting to their final state. This is particularly useful in cases where jQuery is used in low-resource devices.
var disableFx = function() { $.fx.off = 'true'; };
.stop()
The .stop() method stops the currently executing animation in the queue.
$("#stopBtn").click(function() { $("#animationDiv").stop(); });
.fadeIn()
The .fadeIn() methods renders the matched elements with fading effect to opaque.
$('#myDiv').fadeIn('slow', function() { console.log('fadeIn completed'); });
.fadeOut()
The .fadeOut() method hides the matched elements by fading out them to transparent.
$('#myDiv').fadeOut('slow', function() { console.log('fadeOut is completed.'); });
.fadeTo()
The .fadeTo() method will adjust the opacity of the matched elements to the given value.
$("p").click(function () { $(this).fadeTo("slow", 0.47); });
.fadeToggle()
The .fadeToggle() method toggles the display of the matched elements by animating opacity.
$("p").fadeToggle("fast", "linear");
.slideDown()
The .slideDown() method renders the matched elements with a sliding effect.
$('#imageDiv').slideDown('slow', function() { console.log("slideDown completed."); });
.slideToggle()
The .slideToggle() method either displays or hides the matched elements with sliding effect.
$('#imageDiv').slideToggle('slow', function() { console.log("slideToggle completed."); });
.slideUp()
The .slideUp() method hides the matched elements with sliding effect.
$('#imageDiv').slideUp('slow', function() { console.log("slideUp completed."); });
also read:
If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.