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

This article will explain in detail how to achieve custom animation in JavaScript. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Several frame functions used in custom animation:

$("Element") .animate (params [, duration [, easing [, callback])

[quote] functions used to create custom animations.

The key to this function is to specify the animation form and the resulting style property object. Each attribute in this object represents a style property that can be changed (such as "height", "top", or "opacity").

Note: all specified attributes must be in camel form, such as using marginLeft instead of margin-left. If you have friends who do not understand camel naming, please see the three general CSS normalized naming rules.

The value of each attribute represents the end of the animation when the style attribute ends. If it is a numeric value, the style property changes from the current value to the specified value. If you are using a string value such as "hide", "show", or "toggle", the default animation form is called for this property.

Params

(Options): a collection of style attributes and their values as animation attributes and final values

Duration (String,Number): (optional) A string of one of the three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the duration of the animation (e.g. 1000)

Easing (String): (optional) the name of the erase effect to be used (plug-in support is required). The default jQuery provides "linear" and "swing".

Callback (Function): (optional) function executed when the animation is complete

$("Element") .animate (params,options)

Same as above

Params (Options)

A collection of style attributes and their values as animation attributes and final values

Options (Options)

A collection of values containing animation options

("Element") .stop ()

Stops the animation running on the specified element

("Element") .queue ()

Returns a queue that points to the first matching element, often used with length; you can think of it as an array, an animation array containing several effects, and queue () .length to get the first effect currently executed.

Use the above functions to achieve custom animation effects:

(1) implement an animation queue to show each animation in a loop:

Section 29 jQuery assignment $(function () {$("# show") .click (function () {var n = $("div") .queue (); $("span") .text ("Queue length is:" + $("div"). Queue () .length);}) RunIt (); function runIt () {$("div") .show ("slow"); $("div") .animate ({left:'+ = 200'}, 2000); $("div") .slideToggle (1000) $("div"). SlideToggle ("fast"); $("div"). Animate ({left:'- = 200'}, 1500); $("div"). Hide ("slow"); $("div"). Show (1200) $("div"). SlideUp ("normal", runIt);} div {margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none;} div.newcolor {background: blue;} span {color: red;} Show Length of Queue

(2)

Section 29 jQuery assignment $(function () {$(document.body) .click (function () {$("div"). Show ("slow"); $("div") .animate ({left:'+ = 200'}, 2000) $("div") .queue (function () {$(this) .addClass ("newcolor"); $(this). Dequeue ();}) ("div") .animate ({left:'- = 200'}, 500); $("div") .queue (function () {$(this) .removeClass ("newcolor") $(this). Dequeue ();}); $("div"). SlideUp ();})}); div {margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px Background: green; display: none;} div.newcolor {background: blue;} Click here...

(3)

Section 29 jQuery assignment $(function () {$("# start") .click (function () {$("div") .show ("slow"); $("div") .animate ({left:'+ = 200'}, 5000) $("div") .queue (function () {$(this) .addClass ("newcolor"); $(this). Dequeue ();}) $("div") .animate ({left:'- = 200'}, 1500); $("div") .queue (function () {$(this) .removeClass ("newcolor") $(this). Dequeue ();}); $("div"). SlideUp ();}) $("# stop") .click (function () {$("div") .queue ("fx", [])) $("div"). Stop ();}); div {margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none;} div.newcolor {background: blue;} Start Stop

(4)

Section 29 jQuery assignment $(function () {$("button") .click (function () {$("div") .animate ({left:'+ = 200px'}, 2000) ("div") .animate ({top: '0px'}, 600); $("div") .queue (function () {$(this) .toggleClass ("red") $(this). Dequeue ();}); $("div") .animate ({left: '10px, top:' 30px'}, 700) });}); div {margin: 3px; width: 50px; position: absolute; height: 50px; left: 10px; top: 30px; background-color: yellow;} div.red {background-color: red } this is the end of Start's article on "how to achieve custom animation in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.