jQuery动画效果

1.显示及隐藏元素

show() 在显示元素时，能定义显示元素时的效果，如显示速度

$(".tipsbox").show("slow");

显示速度可以取如下值：

毫秒（如1000）、slow（较慢的）、normal（正常）、fast （快速的）

hide()隐藏元素,特点与show()类似

2.切换元素可见状态

toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态  

$(“选择器”).toggle(); 

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

3.淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

示例：

$("input[name=fadein_btn]").click(function(){

     $("img").fadeIn("slow");

});//以较慢的速度淡入 

$("input[name=fadeout_btn]").click(function(){

     $("img").fadeOut(1000);

}); //以1000毫秒的速度淡出 

fadeToggle()可以使元素在显示与隐藏切换 

4.改变元素的高度

slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

示例：

$("h2").click(function(){
     $(".txt").slideUp("slow");    
     $(".txt").slideDown("slow");
});

slideToggle()可以使元素在上拉与下拉切换

5.自定义动画

anmite()可以通过控制元素改变样式的过程的时间来实现动画效果

示例：以1000毫秒的速度将元素的样式改变成指定样式 

$("h2").click(function(){  
    $("#block").animate({         
        width: "90%",        
        height: "100%",         
        fontSize: "16px",         
        borderWidth: 10     
    }, 1000 );
});

animate({css样式},speed) : {css样式}：此处的css样式写法与之前不太一样，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right等等