jQuery实例方法-动画

// hide show 
// $('p').on('mouseenter', function(){
//     $(this).next().show();
// })
// $('.demo').on('mouseleave', function(){
//     $('p').next().hide();
// })
// 手动设置display:none 使用show 会还原成默认状态
// 开始有设置display非none的,时由hide隐藏,在show,会变成开始设置的display

// 参数 
// duration
// width height opacity padding margin
// 第二个参数决定方式,先快后慢,先慢后快等等
// swing linear

// $('p').on('click', function(){
//     // if($(this).next().css('display') == 'none'){
//     //     $(this).next().show();
//     // }else{
//     //     $(this).next().hide();
//     // }
//     $(this).next().toggle();
// })

// fadeIn fadeOut fadeToggle
// $('p').on('click', function(){
//     // if($(this).next().css('display') == 'none'){
//     //     $(this).next().fadeIn();
//     // }else{
//     //     $(this).next().fadeOut();
//     // }
//     $(this).next().fadeToggle();
// })

// fadeTo
// $('p').on('click', function(){
//     if($(this).next().css('display') == 'none'){
//         $(this).next().fadeTo(1500, 0.6, 'swing', function(){
//             console.log(1);
//         });
//     }else{
//         $(this).next().fadeTo(1500, 0.1, 'linear', function(){
//             console.log(2);
//         });
//     }
// })

// slideDown slideUp slideToggle
// $('p').on('click', function(){
//     if($(this).next().css('display') == 'none'){
//         $(this).next().slideDown(1500, 0.6, 'swing', function(){
//             console.log(1);
//         });
//     }else{
//         $(this).next().slideUp(1500, 0.1, 'linear', function(){
//             console.log(2);
//         });
//     }
//     $(this).next().slideToggle();
// })

// target duration easing callback
// normal 400 fast 200
// $('.demo').animate({width: "+=50", height: '+=50', left: "+=50", top: "+=50"}, 1000, 'swing', function(){
//     alert('over');
// })
// 内置队列
// $('.demo').on('click', function(){
//     $(this)
//         .animate({width: "+=50", height: '+=50', left: "+=50", top: "+=50"}, 1000, 'swing')
//             .animate({width: "+=50", height: '+=50', left: "+=50", top: "+=50"}, 1000, 'swing')
// })

// stop
// null 阻止当前运动,直接奔向下一个目标点
// true 阻止一切运动,直接停止
// true,true 停止当前运动,并瞬间移动到当前运动的目标点

// finish 
// 直接移动到最后的目标点

// delay
// $('.demo').on('click', function(){
//     $(this)
//         .animate({width: "+=50", height: '+=50', left: "+=50", top: "+=50"}, 1000, 'swing')
//             .delay(1000)
//                  .animate({width: "+=50", height: '+=50', left: "+=50", top: "+=50"}, 1000, 'swing')
// })

/**
 * jQuery.fn.off 
 * 设置为ture后,运动过程直接跳过
*/

// jQuery queue dequeue clearQueue
// queue
// type content
// 对象{chain:[function, function, function]}
// $('.demo').queue('chain', function(){
//     console.log(1)
// }).queue('chain', function(next){
//     console.log(2)
//     next();
// }).queue('chain', function(){
//     console.log(3)
// })

// dequeue
// $('.demo').dequeue('chain') //1
//     .dequeue('chain'); //2 3

// clearQueue