jQuery animation processing summary

I have been working on front-end stuff for more than a year. Because my boss is pursuing some young and dynamic effects, so that the page elements can not just be simply hidden and displayed, so I often use some animation effects. I found that jQuery animation is really easy to use. Ah, let’s summarize some of the commonly used ones. I hope I won’t have to read the API every time I use it

queue()/dequeue()

These two methods are like Ajax’s XMLHttpRequest The object is also hidden and unknown to ordinary people. These two methods are very useful in animation processing. We often write some code like this

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

In this way, the height, width, and opacity of the test p change at the same time. Sometimes we don't want to execute it synchronously, but separate the change of shape from the change of transparency. First it becomes 300*300 p, and then the transparency gradually changes. We need to write like this

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

Students can imagine what the code would look like if there were ten animation processes. queue() and dequeue() can solve such problems. Create a queue for all process methods and let the functions be called in sequence. Let’s take a look at the syntax first

queue([queueName], newQueue) The operation is to execute the queue method

The first parameter is the queue name, not When written, the default is fx

The second parameter can be a function array to store all queue functions, or it can be a callback function used to add new functions to the queue

dequeue( [queueName ] ) Execute the next function in the queue for the matching element

Every time this method is called, execute the next function in the queue

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 can make test p first change to 200*200, and then change to 400*400. Each animation executes the callback function, calls the next method in the queue, and the two animations are executed in sequence. If If you want to add a function during the execution period, you can do this

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 execution of animations in a predetermined order

clearQueue() / stop()

These two methods are mainly used to cancel the animation

clearQueue([queueName]) Clear the functions in the queue

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) Used to stop the ongoing animation

queue: the name of the ongoing animation queue

clearQueue: the default value is false , whether to clear the queue itself

jumpToEnd: The default value is false, whether to execute the animation immediately

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

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

Writing like this will not terminate the animation, but after the current animation is executed, the next animation in the queue will not be called (the queue has been emptied, there is no next one). If you want to stop the animation immediately, you can Write like this

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

As for whether the stop animation is paused or executed immediately, you need to configure the parameters of stop()

slideDown()/ slideUp() / slideToggle()

The slide effect is often used when making animations, especially menus. These three functions are very simple, that is, the element shrinks/stretches/automatically determines the shrinking and stretching, but its parameters are not only It is duration. We can also add some other controls. Take a look at the introduction in the API. This Sangerfunction parameter is similar, and the example of slideUp

slideUp( [duration ] [, easing ] [, complete ] ) Easing is a gradient method. I have never changed this manually. If duration is not written, it will take about one second to complete the animation by default

slideUp(options )

Commonly used configurations in options are

duration: animation time

queue: you will understand this after reading the above

step: animation During the process, it is executed every time property is changed.

complete: it is executed when the animation is completed.

start: it is executed when the animation starts.

always: the animation is terminated or An accident occurs when the execution is not completed

These three functions will modify the height of the element when executed. After sideUp() is executed, the height will be restored and the dialog will be set to none.

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

fadeIn()/Out()/ fadeToggle The usage of fade() is similar to the slide series and will not be explained one by one. , except that these three functions modify the transparency of the element. After the fadeOut() function is executed, it will restore the opacity of the element and set the display attribute to none

fadeTo( duration, opacity [, easing ] [, complete ] ) The fadeTo() method is not that complicated, but the duration and opacity of fadeTO() are not omissible and must be written

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样，但是在效果上有几点儿不同

1.如果参数duration不写，那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。

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

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

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

hover()

严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。

The above is the detailed content of jQuery animation processing summary. For more information, please follow other related articles on the PHP Chinese website!