Shulou(Shulou.com)06/02 Report--

Editor today to show you how to use jQuery to achieve animation, the knowledge points in the article are introduced in great detail. Friends who feel helpful can browse the content of the article with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Follow the editor to learn more about "how to use jQuery to achieve animation".

Predefined animation

Show and hide

The show () method and hide () method are the most basic animation methods in jQuery. The specific syntax is as follows:

$element.show ([speed], [easing], [fn]); $element.hide ([speed], [easing], [fn])

Speed: a string ("slow", "normal", or "fast") of one of the three predetermined speeds or a millisecond value that represents the duration of the animation.

Easing: used to specify the switching effect. The default is "swing" and the parameter "linear" is available.

Fn: a function that is executed when the animation is complete, once for each element.

/ * Show and hide 1. No animated version * show ()-Show * hide ()-hide 2. There is an animation version-changing width and height at the same time * show (speed,callback) * speed-length of animation execution (in milliseconds * callback)-callback function after animation execution * hide (speed,callback) * speed-length of animation execution in milliseconds * callback-callback function after animation execution * / $('# box'). Hide (2000) Function () {$('# box') .show (2000) })

Sliding animation

The slidelUp () method and the slideDown () method achieve animation by changing the height value. The specific syntax is as follows:

$element.slideUp ([speed], [easing], [fn]); $element.slideDown ([speed], [easing], [fn])

Speed: a string ("slow", "normal", or "fast") of one of the three predetermined speeds or a millisecond value that represents the duration of the animation.

Easing: used to specify the switching effect. The default is "swing" and the parameter "linear" is available.

Fn: a function that is executed when the animation is complete, once for each element.

/ * sliding animation-slideup () and slideDown () * Note-there is no animation-free version (the underlying code predefines how long the animation takes to execute) * effect-change the height of the specified element * / $('# box'). SlideUp (3000); $('# box'). SlideDown (3000)

Fade in and out effect

The fadeln () method and the fadeOut () method animate by changing the transparency. The specific syntax is as follows:

$element.fadeln ([speed], [easing], [fn]); $element.fadeOut ([speed], [easing], [fn])

Speed: a string ("slow", "normal", or "fast") of one of the three predetermined speeds or a millisecond value that represents the duration of the animation.

Easing: used to specify the switching effect. The default is "swing" and the parameter "linear" is available.

Fn: a function that is executed when the animation is complete, once for each element.

/ / change the transparency of the element $('# box') .fadeOut (3000); $('# box') .fadeIn (3000)

Animation toggle effect

In addition to three predefined animation effects, jQuery provides three sets of animation toggle effects:

Toggle ([speed], [easing] [, fn]) method: if the element is visible, switch to hidden; if the element is hidden, switch to visible.

FadeToggle ([speed], [easing] [, fn]) method: turns on and off the fade in and out of all matching elements by changing the opacity, and optionally triggers a callback function after the animation is complete.

$('# btn') .click (function () {/ / $('# box') .toggle (3000); / / $('# box') .slideToggle (3000); $('# box') .fadeToggle (3000)})

Have limitations

Custom animation

Animate () method

JQuery provides the anirmate () method to complete custom animation effects, which can be used in two ways:

$element.animate (properties,duration,easing,complete)

Properties: an object with CSS properties and values, according to which the animation will move.

Duration: a string or number determines how long the animation will run.

Easing: a string indicating which ease function to use for the transition.

Cormplete: a callback function that is executed when the animation is complete.

/ * animate () method-Custom Animation method 1.animate (properties,duration,callback) * properties-indicates the style attribute of cSS * sets the value of the style property at the end of animation execution * duration-indicates the length of animation execution In milliseconds * callback-indicates the callback function 2.animate (properties,options) * properties-indicates the style attribute of cSS * the style attribute value of the end of animation execution * options-indicates the relevant parameter of animation * speed-indicates the duration of animation execution, in milliseconds * comalete-indicates the callback function * queue-Boolean value after the completion of animation execution Sets whether to add to the animation queue * / / * $('# box') .animate ({width: 100, height: 100}, 3000) * / $('# box') .animate ({width: 100, height: 100, left: 100}, {speed: 3000})

Animation is achieved through the animate () method, but the following CSS style attributes are not supported:

BackgroundColor

BorderBottonColor.

BorderLeftColor

BorderRightColor

BorderTopColor

Color

OutlineColor

Concurrency and queuing effect

Concurrent effect: refers to the simultaneous execution of multiple animation effects.

("# panel") .click (function () {$(this) .animate ({left: "500px", height: "200px"}, 3000);}

Queuing effect: refers to the sequential execution of multiple animations.

Queue: used to control whether the current animation effect is concurrent or queued:

/ * queue-used to control whether the current animation effect is concurrent or queued * parameter * false-concurrent * true-queue * / $('# box'). Animate ({left: 3000}, {duration: 3000}). Animate ({top: 3000, queue: true})

Stop the animation effect

JQuery provides a stop () method to stop all animations that are running on the specified element, with the following syntax:

$element.animate ([clearQueue] [, gotoEnd])

ClearQueue: if set to true, clear the queue. You can end the animation immediately.

GotoEnd: let the currently executing animation be completed immediately, and reset the original style of show and hide, call callback functions, etc.

$('# stort') .click (function () {$('# box'). Animate ({left: 3000) .animate ({top: 200}, 3000)}) Click ('# stop') .click (function () {/ * * stop () method does not receive any parameters-immediately stops execution of animation * stop (queue) method first parameter * false-means to stop the current animation, but the animation in the queue continues to execute * true-means to stop the current animation and clear the animation queue * stop (queue) The second parameter of the gotoEnd) method * false-will not do any processing * true-means to stop the current animation And set the specified element to the style * / $('# box') .stop (true,true) after the animation is completed. });

Delay the execution of animation

JQuery provides the delay () method to set a delay to defer the execution of items later in the queue, as shown in the syntax:

$element.delay (duration, queueName])

Duration: delay time in milliseconds.

QueueName: queue noun, default is Ex, animation queue.

$('# box') .animate ({left: 3000) .delay (1000) .animate ({top: 1000}, 3000) Jquery is what jquery is a simple and fast JavaScript library, it has a unique chain syntax and short and clear multi-function interface, efficient and flexible css selector, and can be extended to CSS selector, with convenient plug-in extension mechanism and rich plug-ins, after Prototype is another excellent JavaScript code base, can be used to simplify event processing, HTML document traversal, Ajax interaction and animation, in order to quickly develop the website.

Thank you for your reading, the above is the whole content of "how to use jQuery to achieve animation", learn friends to hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.