JQuery under the animation processing summary

The queue ()/dequeue ()
These two methods are as obscure as the XMLHttpRequest object for Ajax. These two methods are useful for animation, and we often write code like this

$('#test').animate({
            "width": "300px",
            "height": "300px",
            "opacity":"1"
        });

$('#test').animate({
            "width": "300px",
            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

You can imagine if there were ten animated flows, what would the code look like? Queue () and dequeue() can solve this kind of problem, see a queue for all the flow methods, let's call function one by one, look at the syntax first


Queue ([queueName], newQueue) Operation to execute the queue method

The first parameter is the queue name, which defaults to fx if it is not written

The second argument can be an array of functions to hold all the queue functions, or a callback function to add new functions to the queue

Dequeue ([queueName]) Executes the next function in the queue for the matching element

Each time this method is called, the next function in the queue is executed

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];
        function next(){
            $('#test').dequeue('myQueue');
        }
        $('#test').queue('myQueue', q);
        next();

The above code is to make the test div 200*200, then 400*400, each animation executes the function back, calls the next method in the queue, the two animations execute in turn, if you want to add a function during execution

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];
        function next(){
            $('#test').dequeue('myQueue');
        }
        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

In short, these two methods are to facilitate the animation to execute in a predetermined order

ClearQueue/stop () ()

These two methods are mainly used to cancel the animation

ClearQueue ([queueName]) clears the function in the queue

Stop ([queue] [, clearQueue] [, jumpToEnd]) is used to stop an ongoing animation

Queue: name of the queue being animated

ClearQueue: the default value is false to clear the queue itself

JumpToEnd: the default value is false to execute the animation immediately

If you want to stop the animation, you can write it like this

$('#test').clearQueue('myQueue');

This will not terminate the animation, but after the execution of the current animation, it will not call the next animation in the queue (the queue is empty, there is no next animation), if you want to immediately stop the animation, you can write like this

$('#test').stop();

As to whether the stop animation should be paused or executed immediately, you need to configure the stop() parameter

SlideDown ()/slideUp ()/slideToggle ()

Slide effect is often used when making animations, especially menus. These three functions are very simple, namely, the element collapse/stretch/automatically judge collapse and stretch, but the parameters are not only duration, we can also add some other controls. See the introduction in the API, this Sanger function parameter is similar to that of slideUp for example

SlideUp ([duration] [, easing] [, complete]) easing is a gradient, which I've never changed manually, and it takes about a second to animate by default if the duration doesn't write

SlideUp (options)

Common configurations in options are

Duration: animated time

Queue: this will make sense if you look at the top

Step: execute each property change during animation

Complete: when the animation is complete

Start: execution at the beginning of the animation

Always: an animation is terminated or an accident occurs when the execution is not complete

These three functions modify the height of the element while executing, restore the height after the execution of sideUp(), and set the diaplay to none

/ fadeToggle fadeIn/fadeOut () () ()/fadeTo ()

/ fadeToggle fadeIn/fadeOut () () () the usage of the similar to slide series, is no longer one by one, just this three functions to modify the elements of transparency, fadeOut () function will be after the execution of the element opacity, and set the display property to none

FadeTo (duration, opacity [much] [, complete]) fadeTo () method is not so complicated, but fadeTo () duration and opacity can be omitted, you must write

Show/hide () ()/toggle ()

These three functions are used in the same way as the slide series, but with a few differences in effect

1. If the parameter duration is not written, no animation will be executed immediately

2. The animation and modify the height, width, and opacity attribute

3. Hide () after the completion of the height, width, and opacity attribute reduction, and set the display to none

The animate ()
For complex animations that cannot be implemented by the above few functions, it's time to use powerful animate(). There are two USES of animate()

Animate (properties [, duration] [, easing] [, complete])

Don't have to explain most of the properties, the properties is a json, the value of the attribute can be a literal, the function, "toggle", simple expression, if the function is the return value is assigned to the attribute, familiar with jQuery students must understand what is "toggle", is to make an attribute in the initial value and the minimum switch between, will be able to use toggle attributes such as width, height and opacity include digital value properties, simple expression is + = =, etc., For example, you can do something like this: "width" : "+=10px".

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

If a callback function is passed in, it is called after the animation is completed

The animate (properties, the options)

This usage is more flexible. Properties is the same as the previous usage, as are the commonly used options

Duration: animated time

Queue: function queue

Step: the callback function for each property adjustment

Complete: the callback function to complete the animation

Start: called at the beginning of the animation

Always: an animation is terminated or an accident occurs when the execution is not complete

If jQuery is not easy to use, the above configuration is not very familiar

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });

Hover ()
Strictly speaking, this is not an animation function, but since the hover in the lower version of IE does not work on many elements and cannot do many actions with CSS, it is often necessary to use JavaScript to handle haver events.

Hover (handlerIn (eventObject), handlerOut (eventObject))

The method is simple, without much introduction, so that you can write mousein and mouseout together.