JavaScript in the jquery Library to write a guide to animation effects _ basics

The common way to animate in jquery is Hide () and show ().

$ (Element). Hide () This code can be equal to this element.css ("display", "none")

Fill in the event in Hide (time) and show (time) and you can slowly disappear and appear. You can modify multiple styles, height, width, and opacity of an element.

Another set of methods Fadein () and fadeout (), unlike hide and show, change the height of the page when using hide or show, while Fadein and fadeout do not.

$ ("#panel h5.head"). Toggle (function () {$ (this). AddClass ("highlight");                $ (this). Next (). fadeout (1000);                    },function () {$ (this). Removeclass ("highlight");                $ (this). Next ("Div. Content"). FadeIn (1000); ) and a group of Slideup,slidedown to change the height.

Overview of Animation methods

Animation queues

(1) The animation effect on a group of elements.

A the animation occurs simultaneously when multiple properties are applied to a animate () method.

b When the animation method is applied in a chain style, the animation takes place in sequence.

(2) animation effects on multiple groups of elements

A) By default, animations occur at the same time.

b When animation is applied as a callback, the animation occurs in the order of the callback.

In addition, in the animation method, note that other non animation methods will queue, such as the CSS () method, to make these non animation methods also in order to execute, you need to write these methods in the animation method of the callback function.

Give an example of a animate:

$ ("#id"). Animat ({left: ' 400px ', Top: ' 300px '},3000,function () {


     $ (this). CSS ("Border", "1px solid Blue");


});

If you want the animation to stop, you need to insert the stop () method before the animate () method

For example: $ ("#id"). Stop (). Animate () Note the two parameters in the stop.

To determine whether an element is in the animation state's method:

$ (Element). Is (": animated");

JQuery can easily add some dynamic effects to the elements in the page, you can use the built-in effect, or you can define the effect yourself.

Here are some of the built-in effect methods:

• $.fn.show Display the selected element
• $.fn.hide hides the selected element
• $.fn.fadein Fade in
• $.fn.fadeout Fade Out
• $.fn.slidedown to display elements by sliding the effect vertically
• $.fn.slideup hides elements by the effect of vertical east China
• $.fn.slidetoggle Show slide or hide slide interactive execution

A simple example:

$ (' H1 '). Show ();

Set the length of an animation effect

For $.fn.show and $.fn.hide, the time is 0 by default, and the default length for other effects is 400 milliseconds, and of course the length of the set itself:

$ (' H1 '). FadeIn (+);   300 ms
$ (' H1 '). fadeout (' slow ');//slow is a built-in speed constant

The JQuery default speed constants are located 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 = m;
JQuery.fx.speeds.turtle = 2000;

callback function

If you want to execute some code after the animation effect finishes, you can swap the animation methods for a callback function:

$ (' Div.old '). fadeout (+, function () {
 $ (this). Remove ();
});

If no element is matched in the selector, then the callback function is not executed, so 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 (CB);
} else {
  cb ();
}

Custom Animation methods

The $.fn.animate method in JQuery can be used to extend our custom animation, mainly through the Animate method to set the element CSS properties to implement, the element CSS properties can be set when the absolute value, can also use relative values:

$ (' div.funtimes '). Animate (
  {left
    : "+=50",
    opacity:0.25
  },
  300,//Time long
  function () { Console.log (' done! '); callback function
});

However, you cannot change the color of an element when you create a custom animation effect with $.fn.animate. If you want to create a color animation, you need to rely on some other color plug-ins.
the style of the animation

There are two kinds of built-in jQuery animation styles: Swing and linear

$ (' div.funtimes '). Animate (
  {left
    : ["+=50", "Swing"],
    opacity: [0.25, "linear"]
  },

Control animation

JQuery provides several ways to control the execution of animations:

$.fn.stop Stop the currently executing animation

$.fn.delay to suspend animation for a period of time:

$ (' H1 '). Show (+). Delay (1000). Hide (300);

JQuery.fx.off: Turns off the excessive effect of the animation, which is equivalent to setting the length to 0.