jQuery animation effect code sharing

one. Show, hide

The display method in jQuery is: .show() and the hidden method is: .hide(). When there are no parameters, it is just hard to display and hide the content.

 $('.show').click(function(){ //Set trigger events $('#box').show(); //Show}); $('.hide').click(function(){ //Set trigger events $('#box').hide(); //Hide});

In the .show() and .hide() methods, a parameter can be passed, which controls the speed in milliseconds (1000 milliseconds equals 1 second). It is also rich in constant speed to increase and decrease, as well as transparency change.

 $('.show').click(function(){ $('#box').show(1000); //It took 1 second to display}); $('.hide').click(function(){ $('#box').hide(1000); //It took 1 second to hide});

In addition to using milliseconds directly 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.

 $('#box').show('slow'); //600 milliseconds$('#box').show('normal'); //400 milliseconds$('#box').show('fast'); //200 milliseconds

Note: Whether passing milliseconds or passing preset strings, if you accidentally pass an error or pass an empty string. Then it will take the default value: 400 milliseconds.

Use the callback functions of .show() and .hide() to achieve queue animation effects.

(1) Call yourself using the function name

 $('.show').click(function(){ $('#box').show('slow',function showspan(){ $(this).next().show('slow',showspan); });})

(2) Use arguments.callee to call anonymous functions

 $('.show').click(function(){ $('#box').show('slow',function(){ $(this).next().show('slow',arguments.callee); });})

When we use .show() and .hide(), if we need a button to switch, we need to make some conditional judgments. And jQuery provides us with a separate method with similar functions: .toggle().

 $('.toggle').click(function(){ $(this).toggle('slow'); });

two. Slide and scroll jQuery provides a set of methods to change the height of elements: .slideUp(), .slideDown() and .slideToggle(). As the name implies, shrink upwards (scrolls) and expands downwards (slides).

 $('.down').click(function(){ //Swipe down $('#box').slideDown(); });$('.up').click(function(){ //Swipe up $('#box').slideUp(); });$('.toggle').click(function(){ //Switch $('#box').slideToggle(); });

Note: The sliding and scrolling effects are the same as the display and hidden effects, and have the same parameters.

three. Fade in, fade out

jQuery provides a set of methods specifically for transparency changes: .fadeIn() and .fadeOut(), which represent fade in and fade out respectively, and of course there is also an automatic switching method: .fadeToggle().

 $('.in').click(function(){ //Fake in $('#box').fadeIn('slow'); });$('.out').click(function(){ //Fake out $('#box').fadeOut('slow'); });$('.toggle').click(function(){ //Switch $('#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. jQuery provides a .fadeTo() method to solve this problem.

 $('.toggle').click(function(){ $('#box').fadeTo('slow',0.33); //0.33 means the value is 33%});

ps: The number of values ​​is 0 to 1, corresponding to the percentage

Four. Custom animation

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

 $('.animate').click(function(){ $('#box').animate({ 'width':'300px', 'fontSize':'50px', 'opacity':0.5 }); });

Note: A CSS change is an animation effect. In the example above, there are already four CSS changes, and the effect of synchronous motion of multiple animations has been achieved.

There is only one parameter that must be passed, which is an object with a key-value pair CSS style. There are two optional parameters, namely the speed and callback functions.

 $('.animate').click(function(){ $('#box').animate({ 'width':'500px', 'height':'400px', },2000, function(){ alert('Execution completed'); }); });

Up to now, we have created animations with fixed positions that are still. If you want to implement bit movement pictures in motion states, you must use custom animations and combine them with the absolute positioning function of CSS.

 $('.animate').click(function(){ $('#box').animate({ 'top':'300px', //The absolute positioning of CSS must be set first 'left':'200px' }); });

ps: The reference object must be set first in css, and the absolute positioning

In custom animation, each start motion must be in the initial position or the initial state, and sometimes we want to animate it through the current position or state. jQuery provides the functions of adding and decreasing custom animations.

 $('.animate').click(function(){ $('#box').animate({ left:'+=100px', width:'+=100px', height:'+=100px' }); });

five. Queue animation method

We can already implement queue animation before. If it is the same element, it can be called in sequence or concatenated. If it is a different element, you can use the callback function. But sometimes there are too many queue animations, and the readability of the callback function is greatly reduced. To this end, jQuery provides a set of methods specifically used for queued animations.

//Connected cannot be implemented in sequence queue
$('#box').slideUp('slow').slideDown('slow').css('background','orange');

Note: If the animation method is animated, the ligature can be queued in sequence, while the .css() method is not an animation method and will be before the queue is first passed. Then, the animation method callback function can be used to solve the problem.

 //Use the callback function to force queue the .css() method to .slideDown() after $('#box').slideUp('slow').slideDown('slow',function({ $(this).css('background','orange'); });

But if this is the case, when there are many queued animations, the readability will not only decrease, but the original animation method is not clear enough. So, our idea is that each operation is its own independent method. Then jQuery provides a method similar to a callback function: .queue().

 //Use the .queue() method to simulate the animation method after following the animation method $('#box').slideUp('slow').slideDown('slow').queue(function(){ $(this).css('background','orange'); });

Now, we want to continue adding a hidden animation to the .queue() method, but we found that it was impossible to implement it. This is caused by the .queue() feature. Solution: The callback function of jQuery's .queue() can pass a parameter, which is the next function. Call this next() method at the end to execute queue animation.

 //Use next parameter to implement the continuous call queue animation $('#box').slideUp('slow').slideDown('slow').queue(function(next{ $(this).css('background','orange'); next(); }).hide('slow');

ps: .queue() method also has another function, which is to get the length of the current animation queue (not demonstrated in detail)

jQuery also provides a functional method to clean up queues: .clearQueue(). Put it into a queued callback function or .queue() method, and the remaining queues that are executed can be removed.

 //Clean the animation queue $('#box').slideDown('slow',function(){ $(this).clearQueue()});

six. Animation-related methods

Many times, it is necessary to stop running animations, and jQuery provides a .stop() method for this. It has two optional parameters: .stop(clearQueue,gotoEnd); clearQueue passes a boolean value, which represents whether to clear the unexecuted animation queue, and gotoEnd represents whether to directly jump the executing animation to the last state.

 $('.animate').click(function(){ $('#box').animate({ 'left':'300px' },1000); $('#box').animate({ 'top':'300px' },1000); $('#box').animate({ 'width':'300px' },1000); $('#box').animate({ 'height':'300px' },1000); $('#box').animate({ 'height':'300px' },1000);}); $('.stop').click(function(){ $('#box').stop(true,false); });

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

Sometimes when executing animations or queued animations, there is a delay before the motion, and jQuery provides the .delay() method for this. This method can set a delay before the animation or add it in the middle of the queued animation.

 //The start delay is 1 second, the middle delay is 1 second.$('.animate').click(function(){ $('#box').delay(1000).animate({ 'left':'300px' },1000); $('#box').animate({ 'bottom':'300px' },1000); $('#box').delay(1000).animate({ 'width':'300px' },1000); $('#box').animate({ 'height':'300px' },1000); });

arguments.callee is run in which function it represents which function. 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 adjustable. At this time, arguments.callee can be used instead of anonymous functions

 //Recursively execute self, infinite loop execute $('#box').slideToggle('slow',function(){ $(this).slideToggle('slow',arguments.callee); });

The $.fx.off property can turn off all animation effects.

$.fx.off=true; //Default is false

All are understood.

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