Should You Animate With Jquery Or Css

Description: Perform a custom animation of a fix of CSS properties.

The .animate() method allows us to create animation furnishings on any numeric CSS property. The merely required parameter is a manifestly object of CSS properties. This object is similar to the one that can exist sent to the .css() method, except that the range of properties is more restrictive.

Animation Properties and Values

All blithe properties should be animated to a single numeric value, except as noted beneath; nigh properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, pinnacle, or left can exist blithe but background-color cannot be, unless the jQuery.Color plugin is used). Belongings values are treated as a number of pixels unless otherwise specified. The units em and % can exist specified where applicable.

In addition to style properties, some non-manner properties such every bit scrollTop and scrollLeft, equally well as custom properties, can be animated.

Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you desire to animate the rendered border width, at least a edge style and edge width other than "auto" must exist gear up in advance. Or, if you want to animate font size, y'all would use fontSize or the CSS equivalent 'font-size' rather than simply 'font'.

In improver to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that have into business relationship the display blazon of the element. In social club to use jQuery's congenital-in toggle state tracking, the 'toggle' keyword must exist consistently given as the value of the holding being animated.

Blithe properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, and then the target value is computed by adding or subtracting the given number from the current value of the belongings.

Note: Unlike shorthand blitheness methods such as .slideDown() and .fadeIn(), the .animate() method does not brand hidden elements visible as part of the consequence. For instance, given $( "someElement" ).hide().breathing({height: "20px"}, 500), the animation volition run, merely the element will remain hidden.

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default elapsing is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Callback Functions

If supplied, the start, footstep, progress, complete, done, fail, and ever callbacks are called on a per-element basis; this is set to the DOM element being blithe. If no elements are in the set, no callbacks are called. If multiple elements are blithe, the callback is executed once per matched element, not one time for the animation every bit a whole. Use the .promise() method to obtain a promise to which you can attach callbacks that fire once for an blithe prepare of whatever size, including nix elements.

Basic Usage

To animate any element, such as a uncomplicated prototype:

1 two three 4 v

<img id="book" src="book.png" alt="" width="100" height="123" style="position: relative; left: 10px;">

To breathing the opacity, left offset, and height of the prototype simultaneously:

i 2 iii iv 5 6 7 8 9

$( "#clickme" ).click( function() {

Figure ane - Illustration of the specified animation upshot

Note that the target value of the pinnacle property is 'toggle'. Since the paradigm was visible before, the animation shrinks the height to 0 to hibernate information technology. A second click then reverses this transition:

Figure two - Illustration of the specified animation effect

The opacity of the image is already at its target value, and so this belongings is non animated by the 2d click. Since the target value for left is a relative value, the image moves even farther to the right during this second blitheness.

Directional backdrop (pinnacle, right, bottom, left) have no discernible effect on elements if their position manner property is static, which it is by default.

Notation: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

Note: if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may prune this overflow during animation. By fixing the dimensions of the original chemical element being hidden yet, information technology is possible to ensure that the animation runs smoothly. A clearfix tin be used to automatically fix the dimensions of your main element without the need to set this manually.

Step Part

The 2nd version of .animate() provides a stride option — a callback office that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the blitheness as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element beingness animated.

• now: the numeric value of the property being animated at each stride
• fx: a reference to the jQuery.fx prototype object, which contains a number of backdrop such as elem for the animated chemical element, start and finish for the starting time and last value of the animated holding, respectively, and prop for the holding being animated.

Note that the footstep function is called for each blithe property on each animated element. For example, given ii list items, the step role fires four times at each footstep of the animation:

1 2 3 iv 5 6 7 8 nine

step: role( now, fx ) { var data = fx.elem.id + " " + fx.prop + ": " + now; $( "body" ).append( "<div>" + information + "</div>" );

Easing

The remaining parameter of .animate() is a string naming an easing office to use. An easing function specifies the speed at which the animation progresses at different points inside the blitheness. The only easing implementations in the jQuery library are the default, called swing, and i that progresses at a abiding pace, chosen linear. More easing functions are available with the use of plug-ins, nearly notably the jQuery UI suite.

Per-property Easing

Equally of jQuery version ane.iv, you tin can gear up per-holding easing functions within a single .animate() telephone call. In the showtime version of .animate(), each property can take an assortment every bit its value: The showtime member of the array is the CSS property and the second member is an easing role. If a per-holding easing part is not defined for a item property, information technology uses the value of the .animate() method'due south optional easing statement. If the easing statement is non defined, the default swing function is used.

For example, to simultaneously breathing the width and height with the swing easing function and the opacity with the linear easing role:

1 2 three 4 v vi 7 viii 9

$( "#clickme" ).click( office() { width: [ "toggle", "swing" ], elevation: [ "toggle", "swing" ], }, 5000, "linear", function() { $( this ).after( "<div>Animation complete.</div>" );

In the second version of .breathing(), the options object tin can include the specialEasing holding, which is itself an object of CSS properties and their corresponding easing functions. For instance, to simultaneously animate the width using the linear easing office and the summit using the easeOutBounce easing part:

i 2 3 4 v six 7 8 ix 10 11 12 thirteen 14 15

$( "#clickme" ).click( function() { $( this ).after( "<div>Blitheness complete.</div>" );

Every bit previously noted, a plugin is required for the easeOutBounce function.

Examples:

Click the button to animate the div with a number of different properties.

1 2 3 4 5 6 7 8 nine ten 11 12 13 14 15 16 17 eighteen nineteen 20 21 22 23 24 25 26 27 28 29 thirty 31 32 33 34 35

<title>breathing demo</title> <script src="https://code.jquery.com/jquery-3.v.0.js"> </script> <button id="get"> &raquo; Run</button> <div id="block">Hello!</div> // Using multiple unit of measurement types within one blitheness. $( "#go" ).click( function() {

Demo:

Animates a div's left property with a relative value. Click several times on the buttons to meet the relative animations queued up.

1 two 3 4 5 6 7 8 9 10 11 12 xiii 14 15 sixteen 17 18 19 twenty 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<title>animate demo</title> <script src="https://lawmaking.jquery.com/jquery-iii.v.0.js"> </script> <button id="left"> &laquo; </push button> <button id="correct"> &raquo; </button> <div class="block"> </div> $( "#right" ).click( role() { $( ".block" ).animate({ "left": "+=50px" }, "slow" ); $( "#left" ).click( part(){ $( ".cake" ).animate({ "left": "-=50px" }, "slow" );

Demo:

The get-go push shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border blitheness will brainstorm. The 2d push starts a traditional chained animation, where each animation volition start once the previous blitheness on the element has completed.

1 2 three 4 5 half dozen 7 8 9 ten 11 12 13 xiv 15 16 17 18 19 twenty 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 forty 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

<title>breathing demo</title> <script src="https://code.jquery.com/jquery-3.v.0.js"> </script> <button id="go1"> &raquo; Animate Block1</push button> <button id="go2"> &raquo; Animate Block2</push button> <button id="go3"> &raquo; Breathing Both</push> <push id="go4"> &raquo; Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div> $( "#go1" ).click( function() { .animate({ fontSize: "24px" }, 1500 ) .animate({ borderRightWidth: "15px" }, 1500 ); $( "#go2" ).click( function() { .animate({ width: "ninety%" }, 1000 ) .breathing({ fontSize: "24px" }, m ) .animate({ borderLeftWidth: "15px" }, m ); $( "#go3" ).click( function() { $( "#go1" ).add together( "#go2" ).click(); $( "#go4" ).click( role() {

Demo:

Animates the first div'due south left property and synchronizes the remaining divs, using the footstep function to set their left backdrop at each phase of the animation.

1 2 3 4 5 6 vii 8 9 10 11 12 xiii 14 15 sixteen 17 eighteen 19 20 21 22 23 24 25 26 27 28 29 xxx 31 32 33 34 35 36 37 38 39 40 41 42

<title>breathing demo</title> <script src="https://code.jquery.com/jquery-3.five.0.js"> </script> <p> <button id="become">Run »</button> </p> <div class="cake"> </div> <div course="block"> </div> <div class="cake"> </div> <div grade="block"> </div> <div form="block"> </div> <div class="block"> </div> $( "#become" ).click( part() { $( ".block" ).outset().animate({ step: office( now, fx ){ $( ".block" ).slice( 1 ).css( "left", at present );

Demo:

Animate all paragraphs to toggle both summit and opacity, completing the animation within 600 milliseconds.

Breathing all paragraphs to a left manner of 50 and opacity of 1 (opaque, visible), completing the blitheness inside 500 milliseconds.

Animate the left and opacity manner backdrop of all paragraphs; run the animation exterior the queue, so that it volition automatically start without waiting for its turn.

An example of using an 'easing' function to provide a unlike style of animation. This will but work if you take a plugin that provides this easing function. Note, this lawmaking will do nothing unless the paragraph element is hidden.

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

Use an easing function to provide a unlike style of animation. This will merely work if you have a plugin that provides this easing function.

Animate all paragraphs and execute a callback function when the animation is consummate. The first statement is an object of CSS properties, the second specifies that the blitheness should have 1000 milliseconds to complete, the third states the easing type, and the quaternary argument is an anonymous callback function.

1 2 3 4 five 6 7

}, 1000, "linear", function() {

Source: https://api.jquery.com/animate/

Posted by: bootsdoner1941.blogspot.com

Share this post