动画（20171030）

show([arg])//将元素display属性置为除none之外的值，具体记忆功能； 

hide([arg])//将元素display属性置为none

toggle([arg])//实现元素状态的切换

以上两个函数均可带参数，一类是关键字参数：slow,normal,fast;一类是数值参数。如show(1000)表示在1秒钟之内将元素由隐藏置为显示，

slow -> 600,normal -> 400,fast -> 200

fadeIn([arg])//提升已降低透明度的元素，直到显示；即“淡出”；

fadeOut([arg])//降低元素透明度，直至隐藏，style值为"none"；即 “淡入”

slideUp()//元素由下到上缩短隐藏

slideDown()//元素由上到下伸展

<div class="con">
    <div id="box">
        ![](img/banner01.png)
        ![](img/banner02.png)
        ![](img/banner03.png)
        ![](img/banner04.png)
        ![](img/banner05.png)
    </div>
    <div><span id="prev">prev</span><span id="next">next</span></div>
</div>
$(function(){
        var index=0;
        $("#next").click(function(){
            $("#box img").stop().eq(index).fadeIn().siblings().fadeOut();
            if(index==$("#box img").length){
                index=0
            }else{
                index++;
            }
        })
        $("#prev").click(function(){
            $("#box img").stop().eq(index).fadeIn().siblings().fadeOut();
            if(index==0){
                index=$("#box img").length
            }else{
                index--;
            }
        })
    })

第一种：
$("").animate( properties [, duration ] [, easing ] [, complete ] ) 

1)properties 类型: PlainObject 

一个CSS属性和值的对象,动画将根据这组对象移动。 

2)duration (默认: 400) 

类型: Number or String 

一个字符串或者数字决定动画将运行多久。
（手册网注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")
或表示动画时长的毫秒数值(如：1000) ） 

3)easing (默认: swing) 

类型: String 

一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"） 

4)complete

类型: Function() 

在动画完成时执行的函数。 
eg:
$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500,"linear" );
});


第二种：
$().animate( properties, options ) 

1)properties 类型: PlainObject 

一个CSS属性和值的对象,动画将根据这组对象移动。 

2)options   类型: PlainObject 

一组包含动画选项的值的集合。 

支持的选项: 

A)duration (default: 400)  Type: Number or String 

一个字符串或者数字决定动画将运行多久。（手册网注：默认值: "normal"， 三种预定
速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ） 


B)easing (default: swing) Type: String 

一个字符串，表示过渡使用哪种缓动函数。 

C)queue (default: true) Type: Boolean or String 

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 
从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到
由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必
须调用.dequeue("queuename")来启动它。 

D)specialEasing Type: PlainObject 

由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增) 

E)step  Type: Function( Number now, Tween tween ) 

每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。 

F)progress Type: Function( Promise animation, Number progress, Number remainingMs ) 

每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: 1.8)

G)complete Type: Function() 在动画完成时执行的函数。 

H)done Type: Function( Promise animation, Boolean jumpedToEnd ) 在动画完成时执行的函数。 
(他的Promise对象状态已完成). (version added: 1.8)

I)fail  Type: Function( Promise animation, Boolean jumpedToEnd ) 动画失败完成时执行的函数。
(他的Promise对象状态未完成)。 (version added: 1.8)

J)always Type: Function( Promise animation, Boolean jumpedToEnd ) 在动画完成或未完成情况下停止时执行的函数。
(他的Promise对象状态已完成或未完成)。 (version added: 1.8) 

eg：
    $("#box").animate(
            {
                "left":"500px",
                "width":"400px"
            },
            {
                duration:4000,
                step:function(){
                    console.log($(this).css("left"))
                },
                easing:"linear",
                complete:function(){
                    console.log("完成了")
                }
            }
    )

eg：
  $(function(){
        var surtime=0;
        $(".box").hover(function(){
            $(".pro").stop();
        },function(){
            //剩余的时间
            surtime = ($(".box").width()-$(".pro").width())*(5000/($(".box").width()));

            $(".pro").animate({width:"600px"},{duration:surtime,step:function(){
                var num =Math.round(($(this).width()/$(".box").width())*100);
                var speed =Math.round( $(".pro").width()/((num/100)*5));
                $(this).html(num+"%"+"---"+speed);
                console.log(speed);
            }})
        }).mouseleave();

    })