JQ中的动画

一：show()和hide（）修改很多属性（height,width,不透明度）

show()方法相当于css("dispaly","block/inline")

hide()方法相当于css("display",none)

参数 1.X值（元素将在X毫秒X显示）2.normal(正常)，3fast(快)

二：fadeln()和fadeOut()  只改变元素的不透明度

fadeln()在指定的时间内降低元素的不透明性，直到消失(display:none)

fadeout()

三：slideUp()和sildeDown()只会改变元素的高度

slideDown()，如果display属性值为“none”,这个元素将由上向下延伸显示。

slideUp()

四：自定义动画animate()

animate(params,speed,callback)

params:一个包含试样样式属性及值得映射 speed：速度选项，callback函数

1.自定义动画

<script type="text/javascript">
$(function(){
$(".box").click(function(){
$(this).animate({left:"500px"},3000);})
})
</script>

div样式应该把position设置位，relative，absolute

2.累加累减动画

<script type="text/javascript">
$(function(){
$(".box").click(function(){
$(this).animate({left:"+=500px"},3000);})
})
</script>

3.综合动画

$(function(){
$(".box").css("opacity","0.5");
$(".box").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");})

})

4.动画中的回调函数

$(function(){
$(".box").css("opacity","0.5");
$(".box").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000 function（）{
$(this).css("border",5px solid blue);})
})

四：停止动画和判断是否处于动画状态

stop（）

$(this).stop()

.animate({height:"150px",wiidth:"300px"})

2.判断元素是否处于动画状态

if（！$(e).is("animated")）{}

3.延迟动画delay（）

五：其他动画效果

toggle（）可以切换元素的可见性

slideToggle()通过高度变化来切换匹配元素的可见性，这个动画只调节元素的高度

fadeTo()可以通过元素的不透明度以渐进的方式调整到指定的值。只调节不同透明度，即匹配的高度宽度不变！

fadeToggle()通过不透明度来切换匹配元素的可见性