每天学点JQuery(4)—动画

1.show()和hide()：通过改变高度，宽度，不透明度来显示/隐藏元素。

$(function(){
    $("a").hide()//通过hide方法隐藏元素
})

等价于
$(function(){
    $("a").css("display","none");
})


当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。

$(function(){
    $("a").show()//通过show方法显示元素
})

同时也可以为slow()和hide()指定时间参数，以毫秒为单位，还有几个速度关键字:slow(600毫秒)，normal(400毫秒)，fast(200毫秒)

$(function(){
    $("a").hide("slow")//以slow的速度值隐藏元素
})


$(function(){
    $("a").show(1000)//1秒显示元素
})

2.fadeIn()和fadeOut()：通过改变元素的不透明度显示/隐藏元素

$(function(){
    $("a").fadeOut()//降低元素不透明度直到元素完全消失("display:none")
})

$(function(){
    $("a").fadeIn()//增加元素不透明度显示元素
})

与show()hide()一样，fadeOut()fadeIn()也可以添加时间参数。

3.slideUp()和slideDown()方法：通过改变元素的高度显示/隐藏元素

$(function(){
    $("a").slideUp()//元素由上至下延伸显示
})

$(function(){
    $("a").slideDown()//元素由下到上缩短隐藏
})

与show()hide()一样，fadeOut()fadeIn()也可以添加时间参数。

4.animate()：自定义动画方法

animate(params，speed，callback)；

params：一个包含样式属性及值得映射，比如{property1：”value1”，property1：”value1”，……}
speed：速度参数(毫秒单位)，可选
callback：在动画完成时执行的函数，可选

为了能影响元素的top，left，bottom，right样式属性，必须把元素的position属性设置为relative或absolute。

$(function(){
    $("a").animate({left:"500px"},3000)//使元素在三秒内向右移动500像素
})

$(function(){
    $("a").animate({left:"+=500px"},3000)//从当前位置累加500像素
})

$(function(){
    $("a").animate({left:"500px"},3000)//使元素在三秒内向右移动500像素
})

$(function(){
    $("a").animate({left:"500px"，height:"200px"},3000)//使元素在三秒内向右移动的同时放大元素的高度(同时执行)
})

$(function(){
    $("a").animate({left:"500px"},3000).animate({left:"500px"},3000)//使元素在三秒内向右移动500px,然后放大元素的高度(顺序执行)
})

5.动画回调函数：

如果在执行动画的过程中，在某一步动画执行结束后需要执行css()方法，那么并不能得到预期的效果，因为css()方法不会加入到动画队列中，而是立即执行，此时就需要通过回调函数对非动画方法实现排队，只要把css()方法写到前一步的回调函数中即可。

$(function(){
    $("a").animate({left:"500px"},3000)
    .animate({left:"500px"},3000),function(){
        $(this).css("border","1px solid red");
    })
})

6.停止动画：stop([clearQueue],[gotoEnd])

参数说明：
clearQueue(boolean)：代表是否清空未执行完的动画队列
gotoEnd(boolean)：代表是否直接将正在执行的动画跳转到末状态

直接调用stop()，则会立即停止当前正在进行的动画，如果接下来还有动画等待进行，则以当前状态开始接下来的动画。

7.延迟动画：

$(function(){
    $("a").delay(2000).animate({left:"500px"，height:"200px"},3000)//延迟两秒后使元素在三秒内向右移动的同时放大元素的高度(同时执行)
})

8.其他动画方法：

(1)toggle(speed，[callback])：切换元素可见状态。

$(function(){
    $("a").toggle()//如果元素可见，切换为隐藏，如果元素隐藏，切换为可见
})

(2)slideToggle(speed，[easing]，[callback])：通过高度改变元素可见状态

easing参数：规定动画在不同点的不同速度，”swing” - 在开头/结尾移动慢，在中间移动快，”linear” - 匀速移动，默认为swing。

$(function(){
    $("a").slideToggle()//如果元素可见，切换为隐藏，如果元素隐藏，切换为可见
})

(3)fadeTo(speed，opacity，[callback])：把元素的不透明度以渐进的方式调整到指定的值，注意只改变元素的不透明度。

$(function(){
    $("a").fadeTo(600,0.2)//渐渐调整到指定的不透明度(20%)
})

(4)fadeToggle(speed，[easing]，[callback])：通过不透明度变化切换元素可见性

easing参数：规定动画在不同点的不同速度，”swing” - 在开头/结尾移动慢，在中间移动快，”linear” - 匀速移动，默认为swing。

$(function(){
    $("a").fadeToggle()//渐渐调整到指定的不透明度(20%)
})

可用animate()替代上述所有动画方法，在animate()方法中，这些特定样式的属性值可以为”show”，”hide”，”toggle”，也可以是自定义数值，例如：

$(function(){
    $("a").animate({height:"show",width:"show",opactity:"0.6"},400)
})