1.调用show()和hide()方法显示和隐藏元素,toggle切换,之前已经有博文细讲了。
$(selector).hide(speed,[callback]);
$(selector).show(speed,[callback]);
//参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
2.slideUp()和slideDown()方法的滑动效果
比如配合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的长宽并执行完成后显示执行完成
除了改变长宽,还可以移动元素位置,但是移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”。
<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。
6.delay()延时执行动画效果
$(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>