JQuery animation effect code sharing

1、 Show, hide

The display method in jQuery is: Show(), the hiding method is: hide()。 When there are no parameters, it is only hard to display and hide the content.

Yes Show () and The hide () method can pass a parameter that controls the speed in milliseconds (1000 milliseconds equals 1 second). And it is rich in the constant speed of becoming larger and smaller, as well as the transparency transformation.

In addition to directly using milliseconds to control speed, jQuery also provides three preset speed parameter strings: slow, normal and fast, corresponding to 600 milliseconds, 400 milliseconds and 200 milliseconds respectively.

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

use. Show () and Hide() callback function, which can realize the effect of queue animation.

(1) Call itself with function name

(2) Use arguments.callee anonymous function self call

We're using it Show () and When hide (), if a button switching operation is required, some condition judgment needs to be made. JQuery provides us with an independent method with similar functions: toggle()。

2、 Sliding and scrolling jQuery provides a set of methods to change the height of elements: slideUp()、. Slidedown() and slideToggle()。 As the name suggests, it shrinks (scrolls) up and expands (slides) down.

Note: the sliding and scrolling effects have the same parameters as the display and hiding effects.

3、 Fade in, fade out

JQuery provides a set of methods specifically for transparency changes: Fadein () and Fadeout(), which means fade in and fade out respectively. Of course, there is also an automatic switching method: 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. In order to solve this problem, jQuery provides Fadeto() method.

PS: the number of values is 0 to 1, corresponding to the percentage

4、 Custom animation

JQuery provides several simple and commonly used fixed animation aspects that we use. But sometimes, these simple animations can't meet our more complex needs. At this time, jQuery provides a Animate () method to create our custom animation to meet more complex and changeable requirements.

Note: a CSS change is an animation effect. In the above example, there have been four CSS changes, which have realized the effect of synchronous motion of multiple animations.

There is only one parameter that must be passed, that is, an object whose key value changes the style of CSS. There are also two optional parameters, speed and callback function.

So far, we have created fixed position animation. If you want to realize the displacement animation of motion state, you must use custom animation and combine the absolute positioning function of CSS.

PS: the reference object must be set in CSS first for absolute positioning

In custom animation, each start motion must be the initial position or initial state, and sometimes we want to animate again through the current position or state. JQuery provides the accumulation and subtraction functions of custom animation.

5、 Line up animation method

Before, we can realize the queue animation. If it is the same element, it can be called in sequence or concatenation. If it is a different element, you can use the callback function. However, sometimes the readability of callback functions is greatly reduced due to too many queue animations. To this end, jQuery provides a set of methods dedicated to queue animation.

//Concatenation cannot implement sequential queue $('# @ r_817_2419 @') slideUp('slow'). slideDown('slow'). css('background','orange');

Note: if the animation method is used, concatenation can be queued in real order instead of The CSS () method is not an animation method and will be passed into the queue at the beginning. Then, you can use the callback function of animation method to solve it.

But if so, when there are many line-up animations, the readability will not only decline, but the original animation method is not clear enough. Therefore, our idea is that each operation is its own independent method. Then jQuery provides a method similar to callback function: queue()。

Now, we want to continue working together A hidden animation is added after the queue () method. At this time, it is found that it cannot be implemented. This is Caused by the queue () attribute. Solution: jQuery The callback function of queue () can pass a parameter, which is the next function. Call the next () method at the end to concatenate and execute the queue animation.

ps：. Another function of the queue () method is to get the length of the current animation queue (no demonstration)

JQuery also provides a functional method for cleaning up queues: clearQueue()。 Put it into a queued callback function or In the queue () method, you can remove the remaining queues for execution.

6、 Animation related methods

Many times it is necessary to stop the running animation, and jQuery provides an example for this Stop() method. It has two optional parameters: stop(clearQueue,gotoEnd)； Clearqueue passes a Boolean value, which represents whether to clear the unfinished animation queue, and gotoend represents whether to directly jump the executing animation to the end state.

//Note: the first parameter indicates whether to cancel the queue animation. The default is false. If the parameter is true, when there is a queued animation, the subsequent queued animation will be cancelled. The second parameter indicates whether to reach the end of the current animation. The default is false. If the parameter is true, the end is reached immediately after the stop. You can copy the experience yourself.

Sometimes when executing animation or queue animation, there is a delay before the motion, which jQuery provides The delay() method. This method can set a delay before the animation or add a delay in the middle of the queue animation.

arguments. Callee represents the function in which it runs. It is generally used in anonymous functions. In anonymous functions, you sometimes need to call yourself, but because it is an anonymous function, it has no name and is nameless and adjustable. Then you can use arguments Callee instead of anonymous functions

$.fx. The off property turns off all animation effects.

$.fx. off=true; // The default is false

All understood.

The above is the jQuery animation effect code sharing introduced by Xiaobian. I hope it will be helpful to you.