标签：
1.调用show()和hide()方法显示和隐藏元素,toggle切换，之前已经有博文细讲了。
$(selector).hide(speed,[callback]); $(selector).show(speed,[callback]); //参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
比如配合click使用，通过up和down改变元素高度，从何实现其隐藏和显示的效果
$(selector).slideUp(speed,[callback]); $(selector).slideDown(speed,[callback]); //其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。slideDown()仅适用于被隐藏的元素；slideup()则相反。
<script type="text/javascript">
$(function () {
$("h4").bind("click", function () { //绑定click事件
if ($("#hidval").val() == 0) { //value初始值为0的表示hidden状态
$("ul").slideDown(3000,function() { //那么都用slideDown，以3000ms的速度向下显示
$("#hidval").val(1); //并把value改为1
})
} else {
$("ul").slideUp(3000,function(){ //相反
$("#hidval").val(0);
})
}
})
});
</script>同样，slideToggle实现滑动切换的效果。
3.fadeIn（），fadeOut（），实现淡入淡出，通过改变其透明度。
格式如上，参数为时间和回调
fadeTo()方法设置淡入淡出效果的不透明度：
$(selector).fadeTo(speed,opacity,[callback]); //其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。
4.animate()方法自定义动画效果
//$(selector).animate({params},speed,[callback])
//params参数为制作动画效果的CSS属性名与值，要加上大括号;
<script type="text/javascript">
$(function () {
$("div").animate({
width: "20px",
height: "20px"
},
3000, function () {
$("div").html("执行完成!");
});
});
</script>
//这个实现了改变div的长宽并执行完成后显示执行完成<script type="text/javascript">
$(function () {
$("span").animate({
left: "20px"
}, 3000, function () {
$("span").animate({
height: '+=30px',
width: '+=30px'
}, 3000, function () {
$("div").html("执行完成!");
});
});
});
</script>该图形<span></span>已经在css设置了长宽，颜色，position
再调用animate方法，其效果是：先向右移动，left变为20px,耗时3000ms，完成后执行长宽各加30px,耗时3000ms，最后显示执行完成。
这里是几层的回调函数，就会分布进行，如果要通知进行，就把自定义的动画全部放入param中即可。
5.调用stop()方法停止当前所有动画效果
$(selector).stop([clearQueue],[goToEnd]) //其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者true表示停止正在执行的动画，后者为true表示完成正在执行的动画即直接显示最后效果，默认为false。
$(selector).delay(duration)
其中参数duration为延时值。指的是，下一个动画的延时执行，执行中的动画并不会停止。
下面例子表示，执行动画过程中，点击按钮后，下一个动画（动画队列中）推迟2000ms后再执行动画。
还有一点是，重复点击时，时间会累加：
<body>
<h3>调用delay()方法延时执行动画效果</h3>
<span></span>
<input id="btnStop" type="button" value="延时" />
<div id="tip"></div>
<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=60px',
width: '+=60px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
$("#btnStop").bind("click", function () {
$("span").delay(2000);
$("#tip").html("正在延时!");
});
});
</script>
</body>标签：
原文地址：http://blog.csdn.net/u013045370/article/details/51366096
