JQuery animation effects

For a long time in the past, the various effects on the Web page need to be used Flash in progress. In recent years, however, we have seen little of this, and most have used JavaScript animations instead of Flash. instead of animation, this replaces the Web Effects section. Web effects such as: Gradient menu, progressive display, picture carousel, etc. , and animation such as: storyline ads,MV and so on.

A Show, Hide

The method shown in JQuery is:. Show (), hidden by:. Hide (). In the absence of parameters, only hard to display content and hidden content.

$ ('. Show '). Click (function () {

Show

$ (' #box '). Show ();

});

$ ('. Hide '). Click (function () {

Hide

$ (' #box '). Hide ();

});

Note: the. Hide () method is actually set CSS code in line: Display:none; The. Show () method depends on whether the original element is chunk or inline, and if it is a chunk, set the CSS code: display:block; If it is inline, set the CSS code: display:inline;.

The. Show () and. Hide () methods can pass an argument that controls the speed in milliseconds (1000 milliseconds equals 1 seconds). And it's rich in the constant speed and size, and the transparency transformation.

$ ('. Show '). Click (function () {$ (' #box '). Show (1000);//display took 1 seconds});

$ ('. Hide '). Click (function () {$ (' #box '). Hide (1000);//Hide for 1 seconds});

In addition to the direct use of milliseconds to control speed, JQuery offers three preset speed parameter strings: slow, normal, and fast, corresponding to 600 milliseconds, 400 milliseconds, and 200 milliseconds, respectively.

$ ('. Show '). Click (function () {$ (' #box '). Show (' fast ');//200 milliseconds});

$ ('. Hide '). Click (function () {$ (' #box '). Hide (' slow ');//600 milliseconds});

Note: Either pass the number of milliseconds or pass the preset string if you accidentally pass an error or pass an empty string. Then it will take the default value: 400 milliseconds.

$ ('. Show '). Click (function () {$ (' #box '). Show (');//default 400 milliseconds});

Use the callback functions of. Show () and. Hide () to animate the queue.

$ ('. Show '). Click (function () {

$ (' #box '). Show (' Slow ', function () {

Alert (' After the animation continues, execute me! ‘);

});

});

Queue animations, calling themselves using function names

$ ('. Show '). Click (function () {

$ (' div '). First (). Show (' Fast ', function Showspan () {

$ (this). Next (). Show (' Fast ', showspan);

});

});

Queued animations, using Arguments.callee anonymous function self-invocation

$ ('. Hide '). Click (function () {

$ (' div '). Last (). Hide (' fast ', function () {

$ (this). Prev (). Hide (' fast ', Arguments.callee);

});

});

When we use. Show () and. Hide (), some condition judgments are required if a button switch operation is required. And JQuery provides us with a separate approach to similar functionality:. Toggle ().

$ ('. Toggle '). Click (function () {$ (this). Toggle (' slow ');});

Two Slide, scroll

JQuery provides a set of ways to change the height of an element:. Slideup (),. Slidedown (), and. Slidetoggle (). As the name implies, pinch up (scroll) and expand downward (swipe).

$ ('. Down '). Click (function () {$ (' #box '). Slidedown ();});

$ ('. up '). Click (function () {$ (' #box '). Slideup ();});

$ ('. Toggle '). Click (function () {$ (' #box '). Slidetoggle ();});

Note: The slide, scroll effect and display, hide effects, have the same parameters.

Three Fade in, fade out

JQuery provides a set of methods specifically for transparency changes:. FadeIn () and. FadeOut (), respectively, to fade in and out, and, of course, a way to automatically switch:. Fadetoggle ().

$ ('. in '). Click (function () {$ (' #box '). FadeIn (' slow ');});

$ ('. Out '). Click (function () {$ (' #box '). FadeOut (' slow ');});

$ ('. Toggle '). Click (function () {$ (' #box '). Fadetoggle ();});

The above three transparency methods can only be from 0 to 100, or from 100 to 0, if we want to set the specified value there is no way. and JQuery provides the. FadeTo () method to solve this problem.

$ ('. Toggle '). Click (function () {

$ (' #box '). FadeTo (' slow ', 0.33); 0.33 indicates a value of 33

});

Note: Fade in, fade out, and show, hide the effect with the same parameters. For the. FadeTo () method, if the transparency itself is greater than the specified value, it fades out or vice versa.

Four Custom animations

JQuery offers several simple and commonly used fixed animations that we use. But sometimes, these simple animations don't meet our more complex needs. This time, JQuery provides a. Animate () method to create our custom animations to meet more complex and varied requirements.

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({

' Width ': ' 300px ',

' Height ': ' 200px ',

' FontSize ': ' 50px ',

' Opacity ': 0.5

});

});

Note: A CSS change is an animated effect, the above example, already has four CSS changes, has realized the multi-animation synchronous motion effect. Must pass the parameter only one, is a key value to the CSS change style the object. There are also two optional parameters, the speed and the callback function, respectively.

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({

' Width ': ' 300px ',

' Height ': ' 200px '

},

1000,

function () {

Alert (' animation execution finished executing me! ‘);

});

});

To the current position, we are all creating a fixed position that does not move the animation. If you want to animate motion-state displacement, you must use custom animations and combine the absolute positioning of the CSS.

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({

' Top ': ' 300px ',//must first set CSS absolute positioning

' Left ': ' 200px '

});

});

In custom animations, each start motion must be the initial position or initial state, and sometimes we want to animate it by the current position or state. JQuery provides the added and reduced functionality of custom animations.

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({' Left ': ' +=100px ',});

});

There are two ways to customize the implementation of queued animations:
1. Perform an animation again in the callback function.
2. Use concatenating or order to implement the queued animation.

Implement queued animations sequentially

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({' Left ': ' 100px '});

$ (' #box '). Animate ({' Top ': ' 100px '});

$ (' #box '). Animate ({' width ': ' 300px '});

});

Note: Synchronized animations are implemented if they are not the same element

Animating a queue with concatenating

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({' Left ': ' 100px '}). Animate ({' Top ': ' 100px '}). Animate ({' width ': ' 300px '});

});

Queue animations with callback functions

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({' Left ': ' 100px '},

function () {

$ (' #box '). Animate ({' Top ': ' 100px '},

function () {

$ (' #box '). Animate ({' width ': ' 300px '});

});

});

});

Five Queued Animation methods

Before we can already implement the queue animation, if it is the same element, you can sequentially or concatenating call. If it is a different element, you can use a callback function. But sometimes there are too many animations in the queue, and the readability of the callback function is greatly reduced. To do this, JQuery provides a set of methods that are specifically used to queue animations.

Concatenating cannot implement sequential queues

$ (' #box '). Slideup (' slow '). Slidedown (' slow '). CSS (' background ', ' orange ');

Note: If you animate a method, the concatenating can be queued sequentially, and the. css () method is not an animation method and will precede the first incoming queue. Then, you can use the callback function of the animation method to solve.

Using a callback function, force the. css () method to queue after the. Slidedown ()

$ (' #box '). Slideup (' slow '). Slidedown (' Slow ', function () {

$ (this). CSS (' background ', ' orange ');

});

But if this is the case, when the animation is numerous, the readability not only decreases, but the original animation method is not clear enough. So, our idea is that each operation is its own independent approach. Then jquery provides a method similar to the callback function:. Queue ().

After using the. Queue () method to simulate the animation method following the animation method

$ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function () {

$ (this). CSS (' background ', ' orange ');

});

Now, we would like to continue to add a hidden animation after the. Queue () method, when it is found impossible to achieve. This is caused by the. Queue () attribute. There are two ways to solve this problem, the callback function of JQuery's. Queue () can pass a parameter, which is the next function, which is then called by the next () method at the end of the concatenating to execute the queued animation.

Use the next parameter to implement a continuation call to the queued animation

$ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function (next) {

$ (this). CSS (' background ', ' orange ');

Next ();

}). Hide (' slow ');

Because the next function appears after the jQuery1.4 version, we used the. Dequeue () method in general. Functions that are executed in the next element queue.

Use the. Dequeue () method to perform the next function animation

$ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function () {

$ (this). CSS (' background ', ' orange ');

$ (this). Dequeue ();

}). Hide (' slow ');

With sequential invocation, the use of the queued animation method is very clear, with each segment representing a queue, and the nesting of the callback functions disorganized.

Use sequential invocation of the queue, executed one by one, very clear

$ (' #box '). Slideup (' slow ');

$ (' #box '). Slidedown (' slow ');

$ (' #box '). Queue (function () {

$ (this). CSS (' background ', ' orange ');

$ (this). Dequeue ();

});

$ (' #box '). Hide (' slow ');

The. Queue () method also has the ability to get the length of the current animation queue. Of course, this usage is less in common Web development, and we don't discuss it in detail here.

Gets the length of the current queue, FX is the default queue parameter

function count () {

Return $ ("#box"). Queue (' FX '). length;

}

Called at an animation

$ (' #box '). Slidedown (' Slow ', function () {

Alert (count ());

});

JQuery also provides a way to clean up the queue:. Clearqueue (). Put it in a queued callback function or the. Queue () method, and you can remove the remaining queue for execution.

Clean up animation queues

$ (' #box '). Slidedown (' Slow ', function () {

$ (this). Clearqueue ();

});

Six Animation-related methods

Many times you need to stop a running animation, and JQuery provides a. Stop () method. It has two optional parameters:. Stop (clearqueue,gotoend); Clearqueue passes a Boolean value that represents whether to empty an unfinished animation queue, Gotoend represents whether the animation being executed will jump to the end state directly.

Force stop in the running

$ ('. Stop '). Click (function () {

$ (' #box '). Stop ();

});

Forced operation with parameters

$ ('. Animate '). Click (function () {

$ (' #box '). Animate ({' Left ': ' 300px '},1000);

$ (' #box '). Animate ({' Bottom ': ' 300px '},1000);

$ (' #box '). Animate ({' width ': ' 300px '},1000);

$ (' #box '). Animate ({' Height ': ' 300px '},1000);

});

$ ('. Stop '). Click (function () {$ (' #box '). Stop (true,true);});

Note: The first parameter indicates whether to suppress the queued animation, which defaults to false. If the argument is true, the subsequent queue animation is canceled when there is a queued animation. The second parameter indicates whether the end of the current animation is reached and false by default. If the argument is true, the end is reached immediately after the stop. Sometimes, when performing animations or queued animations, you need to have deferred execution before the motion, and JQuery provides the. delay () method. This method can set the delay before the animation, or it can be added in the middle of the queued animation.

Start delay 1 seconds, intermediate delay 1 seconds

$ ('. Animate '). Click (function () {

$ (' #box '). Delay (+). Animate ({' Left ': ' 300px '},1000);

$ (' #box '). Animate ({' Bottom ': ' 300px '},1000);

$ (' #box '). "Delay ("). Animate ({' width ': ' 300px '},1000);

$ (' #box '). Animate ({' Height ': ' 300px '},1000); });

In the basic section of the selector, we mentioned a filter: animated, which can determine which element the current motion animation is. With this feature, we can avoid animations and user behavior that are caused by animation accumulation when the user quickly animates an element.

Recursive execution self, wireless loop playback

$ (' #box '). Slidetoggle (' Slow ', function () {

$ (this). Slidetoggle (' slow ', Arguments.callee);

});

Stop a moving animation and set a red background

$ ('. Button '). Click (function () {

$ (' div:animated '). Stop (). CSS (' background ', ' red ');

});

Six Animation Global Properties

JQuery provides the properties of two global settings: $.fx.interval, set the number of frames to run per second, and $.fx.off to turn off all animations on the page. The $.fx.interval property adjusts the number of frames per second that the animation will run, and defaults to 13 milliseconds. Smaller numbers are smoother, but may affect browser performance.

Set the number of running frames to 1000 milliseconds

$.fx.interval = 1000; Default is 13

$ ('. Button '). Click (function () {$ (' #box '). Toggle (3000);});

The $.fx.off property can turn off all animation effects, and in very low-end browsers, animations can cause errors due to various exception problems. And JQuery sets this property, which is used to turn off the animation effect.

Set animation to Off true

$.fx.off=true; Default is False

JQuery animation effects