How to compile animation effects in the jQuery library of JavaScript?

This article mainly introduces the Guide to writing animation effects in the JavaScript jQuery library, including some examples of using built-in effects methods, for more information, see hide () and show ().

((Element).hide())this code can be equivalent to element.css ("display", "none ")

Fill in events in hide (time) and show (time) to gradually disappear and appear. You can modify multiple styles, heights, widths, and opacity of an element.

Another set of methods, fadeIn () and fadeOut (), are different from hide and show. When hide or show is used, the webpage height is changed, while fadeIn and fadeOut are not.

$ ("# Panel h5.head "). toggle (function () {$ (this ). addClass ("highlight"); $ (this ). next (). fadeOut (1000);}, function () {$ (this ). removeClass ("highlight"); $ (this ). next ("p. content "). fadeIn (1000) ;}); there is also a set of slideUp, slideDown to change the height.

Animation method Overview

Animation queue

(1) animation effects on a group of elements.

A) when multiple attributes are applied in an animate () method, the animation occurs simultaneously.

B) When an animation method is applied in chained writing, the animation occurs in sequence.

(2) animation effects on multiple groups of Elements

A) by default, animations occur simultaneously.

B) When an animation is applied as a callback, the animation occurs in the callback order.

In addition, in the animation method, note that other non-animation methods will be inserted into the queue, such as the css () method. These non-animation methods should also be executed in order, you need to write these methods in the callback function of the animation method.

An example of animate is as follows:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){     $(this).css(“border”,”1px solid blue”);});

To stop an animation, insert the stop () method before the animation () method.

For example, $ ("# id"). stop (). animate () Pay attention to the two parameters in stop.

When determining whether an element is animated:

$(element).is(“:animated”);

JQuery can easily add some dynamic effects to the elements on the page. You can use the built-in effects or define the effects yourself.

The following are some built-in effects:

• $. Fn. show selected elements
• $. Fn. hide selected elements
• $. Fn. fadeIn fade in
• $. Fn. fadeOut fade out
• $. Fn. slideDown displays elements through vertical sliding.
• $. Fn. slideUp hides elements through the vertical Effect of East China
• $. Fn. slideToggle displays sliding or hidden sliding interactive execution

A simple example:

$('h1').show();

Set the animation duration

For $. fn. show and $. fn. hide, the default time length is 0 by default, and the default time length of other effects is generally 400 milliseconds. Of course, you can set the time length yourself:

$('H1 '). fadeIn (300); // 300 ms $ ('h1'). fadeOut ('low'); // slow is a built-in Speed Constant

The default speed constants of jQuery are all in the jQuery. fx. speeds object:

speeds: {  slow: 600,  fast: 200,  // Default speed  _default: 400}

We can also extend this object to add our own common speed values:

jQuery.fx.speeds.blazing = 100;jQuery.fx.speeds.turtle = 2000;

Callback Function

If you want to execute some code after the animation effect ends, you can replace these animation methods with a callback function:

$('p.old').fadeOut(300, function() { $(this).remove();});

If the selector does not match any element, the callback function will not be executed. Therefore, it is necessary to make a judgment before executing the callback function:

var $thing = $('#nonexistent');var cb = function() {  console.log('done!');};if ($thing.length) {  $thing.fadeIn(300, cb);} else {  cb();}

Custom Animation Method

$. In jQuery. fn. the animate method can be used to expand our custom animations. It is mainly implemented by setting element CSS attributes through the animate method. When setting element CSS attributes, you can use absolute values or relative values:

$ ('P. funtimes '). animate ({left: "+ = 50", opacity: 0.25}, 300, // duration function () {console. log ('done! '); // Callback function });

However, when you use $. fn. animate to create a custom animation effect, the color of the element cannot be changed. If you want to create a color animation, You need to rely on other color extensions.
Animation style

JQuery has two built-in animation styles: swing and linear.

$('p.funtimes').animate(  {    left : [ "+=50", "swing" ],    opacity : [ 0.25, "linear" ]  },  300);

Control Animation

JQuery provides several methods to control animation execution:

$. Fn. stop the animation being executed

$. Fn. delay pause the animation for a period of time:

$('H1 '). show (300). delay (1000). hide (300 );

JQuery. fx. off: the animation duration is set to 0.