jQuery动画队列

1.连续动画实现

    show
    hide
    fadeIn
    fadeOut
    slideDown
    slideUp
    回调
    

        

            hello
        
    
 
         $('#action').on('click', function() {
           var $box = $('.box')
            $box.hide(1000, function() {
                $box.show(1000, function() {
                    $box.fadeOut(1000, function() {
                        $box.fadeIn(1000, function() {
                            $box.slideUp(1000, function() {
                                $box.slideDown(1000, function() {
                                    console.log('执行完毕');
                                })
                            })
                        })
                    })
                })
            })
        })

2.动画队列

将动画连续的写就会形成一个动画队列，从上至下挨个执行,与上述方法效果一样但代码更简单清晰

        $('#action').on('click', function() {
            var $box = $('.box')
            $box.hide(1000)
                .show(1000)
                .fadeOut()
                .fadeIn()
                .slideUp()
                .slideDown(function() {
                    console.log('ok');
                })
            console.log('是否执行完毕');
        })