jquery几个动画的用法和异同

一。控制元素的显示及隐藏

show( )控制元素的显示，hide( )控制元素的隐藏

1 $(selector).show([speed],[callback]); 
2  //speed可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
3 
4 $(selector).hide([speed],[callback]); 
5  //callback可选。show函数执行完之后，要执行的函数

例子：

$("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
$("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
$("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

二。改变元素的透明度

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

$(selector).fadeIn([speed],[callback]);
//speed可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

$(selector).fadeOut([speed],[callback]);
//callback可选。fadeIn函数执行完之后，要执行的函数

例子：

$("#panel h5.head").toggle(function(){
     $(this).next("div.content").fadeOut();
},function(){
     $(this).next("div.content").fadeIn();
});

三。改变元素的高度

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

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

例子：

$("#panel h5.head").toggle(function(){
     $(this).next("div.content").slideUp();
},function(){
     $(this).next("div.content").slideDown();
});

四。自定义动画

$(selector). animate({params},speed,callback);

（1）params：一个包含样式属性及值的映射，比如{property1: "value1", property2: "value2", ····· }

（2）speed : 速度参数，可选。

（3）callback:在动画完成时执行的函数，可选。

例子：

点击<div>时，会缓慢的移动

<head>
<style>
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid #0050D0;
}
</style>
</head>
<div id="panel">click me</div>
<script>
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
});
</script>

jquery几个动画的用法和异同

推荐阅读