jQuery篇之操作jQuery对象（动画）

目录
    1. 

隐藏/显示/来回切换显示隐藏

hide（隐藏）

隐藏
    默认执行动画会改变元素的高度，高度，透明度
    $("#p2").hide();
    $("#p2").hide({
                duration: 3000,  // "slow"、"fast" 或毫秒 
                complete: function() {
                    alert('执行3000ms动画完毕')
                }
            })
    $("p").hide(1000,function(){  // ms
      alert("The paragraph is now hidden 动画完毕");
    });

静态设置    
    改变样式display为none(一般)
    设置位置高度为0
    设置透明度为0

注意：
    jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局
    show与hide方法本质是修改的display属性。通过visibility属性布局需要通过css方法单独设置。
    如果在样式中使用了!important，比如display: none !important，想要show()方法正常工作，必须使用.css('display', 'block !important')重写样式

show（显示）

显示（用法同hide）
    $("p").show();

toggle（来回切换显示隐藏）

来回切换显示隐藏（用法同hide）
    通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
    $("p").toggle();
    $("p").toggle(inline);

 注意：
    display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
    动态效果为从右至左。横向动作，通过display来判断切换所有匹配元素的可见性

淡入/淡出/来回切换淡入淡出/淡出到指定透明度

fadeIn（淡入）

淡入
    仅影响透明度，高度和宽度不会发生变化
    $("#p").fadeIn();
    $("#p").fadeIn(1000);
    $("#p").fadeIn(1000, "linear");
    $("#p").fadeIn(1000, function() {
       alert("动画执行完毕!");
    });
    $("#p").fadeIn({
        duration: 1000       
    });

fadeOut（淡出）

淡出（用法同fadeIn）
    $("#div1").fadeOut();

fadeToggle（来回切换淡入淡出）

来回切换淡入淡出（用法同fadeIn）
    $("#div1").fadeToggle();

fadeTo（淡出到指定透明度）

淡出到指定透明度
    $("p").fadeTo("slow", 0.5);
    $("p").fadeTo("slow", 0.5, function() {
        alert('完成')
    });

下滑/上滑/来回切换上下滑

slideDown（下滑）

下滑
    $("#p").slideDown();
    $("#p").slideDown(1000);
    $("#p").slideDown(1000, function() {
      // 动画执行完毕后
    });

注意：
    下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
     'fast' 和 'slow' 分别代表200和600毫秒的延时,默认400ms。

slideUp（上滑）

上滑（用法同slideDown）
    $("#p").slideUp();

本质：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。

slideToggle（来回切换上下滑）

来回切换上下滑（用法同slideDown）
    $("#p").slideToggle();

注意：
    display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
    当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局
    动态效果从下至上。竖向动作，通过高度变化来切换所有匹配元素的可见性

animate

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )  // 第二个参数到最后一个参数使用字典格式

说明：
    1、properties
        一个或多个css属性的键值对所构成的Object对象。所有用于动画的属性必须是数字的：比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing。
        属性值的默认单位像素（px）。
        除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'
        使用驼峰形式，而不是-
    2、options
        duration ： 执行的时间
        easing： easing 缓动函数
        step：每一步动画时调用
        progress：每一步动画完成后调用
        complete：动画完成回调

方式一（举例）
            $aaron.animate({
                width  :300,
                height :300
            });

            $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });

            $aaron.animate({
                left: 50, 
                width: '50px'   
                opacity: 'show',  
                fontSize: "10em",
            }, 500);

            $aaron.animate({
                fontSize: "5em"
            }, 2000, function() {
                alert("动画 fontSize执行完毕!");
            });

方式二（举例）

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

            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                step: function(now, fx) {
                   $aaron.text('高度的改变值:'+now)
                },
                progress: function(now, fx) {
                }
            })

stop

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

    // 停止当前动画，如果队列中有其他动画，执行第二个动画。
    $aaron.stop()
    // 停止所有动画。
    $aaron.stop(true)
    // 停止所有动画,并立即变为第一个动画的结束状态。
    $aaron.stop(true,true)