---------------
To animate any element, such as a simple image:
Click here
To animate the opacity, left offset, and height of the image simultaneously:
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
Note that the target value of the height property is 'toggle'. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
The opacity of the image is already at its target value, so this property is not animated by the second click. Since the target value for left is a relative value, the image moves even farther to the right during this second animation.
Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
Note: if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A clearfix can be used to automatically fix the dimensions of your main element without the need to set this manually.
Step Function
The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.
Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:
$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('
' + data + '
');}
});
Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
Per-property Easing
As of jQuery version 1.4, you can set per-property easing functions within a single .animate() call. In the first version of .animate(), each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the .animate() method's optional easing argument. If the easing argument is not defined, the default swing function is used.
For example, to simultaneously animate the width and height with the swing easing function and the opacity with the linear easing function:
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('
Animation complete.
');});
});
In the second version of .animate(), the options map can include the specialEasing property, which is itself a map of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the linear easing function and the height using the easeOutBounce easing function:
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('
Animation complete.
');}
});
});
As previously noted, a plugin is required for the easeOutBounce function.
Additional Notes:
All jQuery effects, including .animate(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.
Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.
Examples:
Example: Click the button to animate the div with a number of different properties.
Hello!
Demo:
Example: Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.
Demo:
Example: The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
Block1
Block2
Demo:
Example: Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation.
Demo:
Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$( "p" ).animate({
"height": "toggle", "opacity": "toggle"
}, "slow" );
Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
$( "p" ).animate({
"left": "50", "opacity": 1
}, 500 );
Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.
$( "p" ).animate({
"opacity": "show"
}, "slow", "easein" );
Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$( "p" ).animate({
"height": "toggle", "opacity": "toggle"
}, { duration: "slow" });
Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.
$( "p" ).animate({
"opacity": "show"
}, { "duration": "slow", "easing": "easein" });
Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.
$( "p" ).animate({
height:200, width:400, opacity: .5
}, 1000, "linear", function(){ alert("all done"); });
Thanks
shibashish mohanty
.clearQueue():-
.clearQueue( [queueName] )
queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.
When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.
Example:
Empty the queue.
.delay():-
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Example:
Animate the hiding and showing of two divs, delaying the first before showing it.
.dequeue():-
.dequeue( [queueName] )
queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.
When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.
Example:
Use dequeue to end a custom queue function which allows the queue to keep going.
.fadeIn():-
The .fadeIn() method animates the opacity of the matched elements.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
We can animate any element, such as a simple image:
Click here
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Examples:
Example: Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
Click here...
.fadeOut():-
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
We can animate any element, such as a simple image:
Click here
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
Examples:
Example: Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
If you click on this paragraph
you'll see it just fade away.
Demo:
Example: Fades out spans in one section that you click on.
Find the modifiers -
If you really want to go outside
in the cold then make sure to wear
your warm jacket given to you by
your favorite teacher.
Demo:
Example: Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.
linear
swing
.fadeTo():-
The .fadeTo() method animates the opacity of the matched elements.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Unlike the other effect methods, .fadeTo() requires that duration be explicitly specified.
If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.
We can animate any element, such as a simple image:
Click here
With the element initially shown, we can dim it slowly:
$('#clickme').click(function() {
$('#book').fadeTo('slow', 0.5, function() {
// Animation complete.
});
});
Examples:
Example: Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
Click this paragraph to see it fade.
Compare to this one that won't fade.
Demo:
Example: Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
And this is the library that John built...
Demo:
Example: Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
Wrong
Wrong
Right!
.fadeToggle():-
Example:
Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion.
This paragraph has a slow, linear fade.
This paragraph has a fast animation.
jQuery.fx.interval:-
Note:jQuery.fx.interval currently has no effect in browsers that support the requestAnimationFrame property, such as Google Chrome 11. This behavior is subject to change in a future release.
Example:
Cause all animations to run with less frames.
jQuery.fx.off:-
Animations can be turned back on by setting the property to false.
Example:
Toggle animation on and off
.hide():-
We can animate any element, such as a simple image:
Click here
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
$('#book').hide('slow', function() {
alert('Animation complete.');
});
});
Examples:
Example: Hides all paragraphs then the link on click.
Hello
Click to hide me tooHere is another paragraph
Demo:
Example: Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
Hiya
Such interesting text, eh?
Demo:
Example: Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
Once upon a
time there were
three programmers...
Demo:
Example: Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
.queue():-
.queue( [queueName] )
queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.
Example:
Show the length of the queue.
The queue length is:
This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.
$('#foo').slideUp(); $('#foo').queue(function() { alert('Animation complete.'); $(this).dequeue(); }); This is equivalent to:
$('#foo').slideUp(function() { alert('Animation complete.'); }); Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.
In jQuery 1.4 the function that's called is passed in another function, as the first argument, that when called automatically dequeues the next item and keeps the queue moving. You would use it like so:
$("#test").queue(function(next) { // Do some stuff... next(); });
Examples:
Example: Queue a custom function.
Click here...
Demo:
Example: Set a queue array to delete the queue.
.show():-
Examples:
Example: Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.
Demo:
Example: Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
Hello 3,
how
are
you?
Demo:
Example: Shows all span and input elements with an animation. Once the animation is done, it changes the text.
Are you sure? (type 'yes' if you are)
.slideDown():-
Examples:
Example: Animates all divs to slide down and show themselves over 600 milliseconds.
Click me!
Demo:
Example: Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.
Push!
.slideToggle():-
We can animate any element, such as a simple image:
Click here
We will cause .slideToggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
With the element initially shown, we can hide it slowly with the first click:
A second click will show the element once again:
Examples:
Example: Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
This is the paragraph to end all paragraphs. You
should feel lucky to have seen such a paragraph in
your life. Congratulations!
Demo:
Example: Animates divs between dividers with a toggle that makes some appear and some disappear.
There have been 0 toggled divs.
.slideUp():-
We can animate any element, such as a simple image:
Click here
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
Examples:
Example: Animates all divs to slide up, completing the animation within 400 milliseconds.
Click me!
Demo:
Example: Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.
.stop():-
The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:
Hover me
We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});
Toggling Animations
As of jQuery 1.7, stopping a toggled animation prematurely with .stop() will trigger jQuery's internal effects tracking. In previous versions, calling the .stop() method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. To observe the new behavior, see the final example below.
Animations may be stopped globally by setting the property $.fx.off to true. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.
Examples:
Example: Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.
Demo:
Example: Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.
.toggle():-
We can animate any element, such as a simple image:
Click here
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
With the element initially shown, we can hide it slowly with the first click:
A second click will show the element once again:
The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the statement:
$('#foo').toggle(showOrHide);
is equivalent to:
if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}
Additional Notes:
All jQuery effects, including .toggle(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.
Examples:
Example: Toggles all paragraphs.
Hello
Demo:
Example: Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.
Hiya
Such interesting text, eh?
Demo:
Example: Shows all paragraphs, then hides them all, back and forth.
Hello
No comments:
Post a Comment