Learning jQuery animation Summary 2--

First, the basic animation

Method name	Explanation
show([speed,[easing],[fn]]) hide([speed,[easing],[fn]])	Speed : one of the three predetermined velocity string ( "slow", "normal" , or "fast") or a number of milliseconds long represents animation (corresponding to 600 ms, 400 ms and 200 ms) that the easing : (Optional The) to toggle the effect defaults to "swing", available parameters "linear" fn: function is executed when the animation is complete, executed once for each element
toggle([speed],[easing],[fn])	Alternatively to hide () method and show () method, in response to rotation of the click event selected element. If the element is visible, the hidden switch; if the element is hidden, invisible switched.
slideUp([speed],[easing],[fn]) slideDown([speed],[easing],[fn])	This animation only adjust the height of the element, other parameters with the show
slideToggle()	SlideUp used in place of () and slideDown () method, we can only change the height
fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed,[easing],[fn]])	This animation only adjust the opacity of the elements, other parameters with the show Transparency three methods can only be from 0 to 100, or from 100-0
fadeTo([[speed],opacity,[easing],[fn]])	Only change opacity Opacity : indicates transparency between a number 0-1.

1, show, hide,

.hide () method is actually set up within the line CSS code: display: none; but .show () method is to block or inline to decide if a block is set according to the original CSS code elements: display: block; If it is inline, then set CSS code: display: inline;

$('.show').click(function () {
    $('#box').show('slow', function () {
        Alert ( 'the duration of the animation is complete, execute me!' );
    });
});
/ / Lined animation , using the name of the function calls itself 
$ ( '. Show'). The Click ( function () {
    $('div').first().show('fast', function showSpan() {
        $(this).next().show('fast', showSpan);
    });
});
// lined up animation , using arguments.callee from anonymous function call 
$ ( '. Hide'). The Click ( function () {
    $('div').last().hide('fast', function() {
        $(this).prev().hide('fast', arguments.callee);
    });
});

1.2 slider, scroll

Slide show and scrolling effect, the same effect is hidden, with the same parameters.

1.3 fade in, fade out

Fade-in, fade-out effects and show that the effect of hiding the same, with the same parameters
For .fadeTo () method, if the transparency itself is larger than the specified value, will fade out, otherwise the opposite

$('.toggle').click(function () {
    $ ( '#Box') fadeTo ( 'SLOW', 0.33);. // 0.33 represents a value of 33 
});

Second, the custom animation

　　animate(params,[speed],[easing],[fn])

the params : a set of animation properties and comprising as a set of style attributes and their values, and the final value of
Speed : one of the three kinds of predetermined velocity string ( "slow", "normal" , or "fast") or when the number of milliseconds long animation representing (eg: 1000)
that the easing : the effect of erasing the name you want to use (requires plug-in support) jQuery provides default "linear" and "swing"..
the Fn : Function executed when the animation is complete, each element once.

2.1 Operation plurality of attributes --params

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

By default, the location of all HTML elements are static and can not be moved. For the operation of position, remember first of all the CSS position attribute of the element is relative, fixed or absolute
Color animation is not included in the core jQuery library. If you need to generate color animation, you need to download the plug-in from jQuery.com Color Animations

2.2 using a relative value - the value with the front or = + - =

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Custom Animation, the beginning of each movement must be original or initial state, and sometimes we want to re-animated by the current position or status, this time you can use the relative value

2.3 Use predefined value - "show", "hide" or "toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Queuing 2.4

Customizing the way to achieve lined animation, there are two:

Then execute a callback function in animation - the same element or different elements
To achieve parade through animation put together or sequentially - the same element

// 1. Sequential order queue achieved by animation - Note: If an element is not the same, it will synchronize animation 
. $ ( '. Animate') the Click ( function () {
　　$('#box').animate({'left' : '100px'});
　　$('#box').animate({'top' : '100px'});
　　$('#box').animate({'width' : '300px'});
});
// 2.  Realize animation queue put together by 
$ ( '. Animate'). The Click (function() {
　　$('#box').animate({
　　　　'left' : '100px'
　　}).animate({
　　　　'top' : '100px'
　　}).animate({
　　　　'width' : '300px'
　　});
});
// 3.  achieved by animation callback queue 
$ ( '. Animate'). The Click ( function () {
　　$('#box').animate({
　　　　'left' : '100px'
　　}, function () {
　　　　$('#box').animate({
　　　　　　'top' : '100px'
　　　　}, function () {
　　　　　　　　$('#box').animate({
　　　　　　　　　　'width' : '300px'
　　　　　　　　});
　　　　});
　　});
});

2.4 Other functions

① stop([queue],[clearQueue],[jumpToEnd])

Queue : queue name is used to stop the animation
clearQueue : If set to true, then the queue is cleared. Animation can be ended immediately
jumpToEnd : If set to true, the completion queue. Animation can be done immediately

$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });  
  $ ( "#Stop") the Click. ( Function () {
     $ ( "div") STOP ();.    // button to stop the animation is currently active, but allow queued animation execution forward
   });
  $ ( "# STOP2") the Click. ( Function () {
     $ ( "div") STOP (. To true );    // button to stop the current activities of animation, animation and empty the queue; therefore all the elements of the animation will stop
   }) ;
  $ ( "# Stop3") the Click. ( Function () {
     $ ( "div") STOP (. To true , to true );    // completed immediately animation currently active, then stopped
   });  
});

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

② delay(duration,[queueName])

$('#foo').slideUp(300).delay(800).fadeIn(400);

Queue ③ (Element, [queueName], the callback () ) - display function or operation performed on a queue matching elements

Element : Check the additional queue DOM element
queueName : string value contains the name of the sequence. The default is fx, the standard effects sequences.
the callback () : function to be added into the queue

④ dequeue ([queueName]) - is removed from a queue function forefront of the queue, and execute him , queue name, the default is fx

ClearQueue ⑤ ( [queueName] ) - all queues on the empty object has not been executed , the queue name, the default is fx

If no parameters, the default animation queue is emptied. This is similar with the stop (true), but the stop () can only be cleared animation queue, and this can empty all queues () created by .queue

// Use .queue () method for simulating an animation method, after following the method of animation 
$ ( '# Box'). SlideUp ( 'SLOW'). SlideDown ( 'SLOW'). Queue ( function () {
    $(this).css('background', 'orange');
});
// If the function is executed to continue the queue is performed next () or the jQuery (the this) .dequeue (); 
... $ ( '# Box') slideUp ( 'SLOW') slideDown ( 'SLOW') Queue ( function (next) {
    $(this).css('background', 'orange');
    next();
}).hide('slow');
$('#box').slideUp('slow').slideDown('slow').queue(function () {
    $(this).css('background', 'orange');
    $ ( The this ) .dequeue ();    // the Next function is jQuery1.4 version did not emerge until later, but before we commonly use is .dequeue () method 
}) hide ( 'SLOW'. );
 // using sequential call lined up, one by one execution, very clear 
$ ( '# Box') slideUp ( 'SLOW'. );
$('#box').slideDown('slow');
$('#box').queue(function () {
    $(this).css('background', 'orange');
    $(this).dequeue();
})
$('#box').hide('slow');

Third, animation and related filters and methods

3.1 :animated

This filter can determine which current motion animation elements. With this feature, we can avoid the user to quickly perform an element in the animation, animation and user behavior caused due to the accumulation of the animation is inconsistent.

// recursively self wireless loop 
$ ( '# Box'). SlideToggle ( 'SLOW', function () {
    $(this).slideToggle('slow', arguments.callee);
});
// stop the animation is moving, and set on a red background 
$ ( '. The Button'). The Click ( function () {
    $('div:animated').stop().css('background', 'red');   
});

3.2 The method of determining whether elements in the animation state

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

Fourth, the global animation properties

$ .fx.interval, the number of frames per second operation set , the default is 13 milliseconds. The smaller the number, the more fluid, but may affect browser performance
$ .Fx.off, turn off all animations on the page

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3665238.html

Learning jQuery animation Summary 2--

Guess you like