利用JQuery的一些函数可以直接实现部分动态的效果,主要涉及以下几个(还有很多):
1、隐藏与显示:hide(); show(); toggle();
2、滑动效果:slideDown(); slideUp(); slideToggle();
3、渐变效果:fadeIn(); fadeOut(); fadeTo();
4、自定义动画函数:animate();
一、hide(); show(); toggle();
语法格式:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)
说明:
speed:(可选)设置效果的变化速度,有slow, fast, normal或具体毫秒值可以选。
callback:(可选)设置后续执行函数。注:是在该效果100%执行完毕后才会执行callback函数,根据具体情况使用。当变化速度慢时可能出现效果混乱。
实例:
<script type="text/javascript">
$(document).ready(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
</script>
二、slideDown(); slideUp(); slideToggle();
语法格式:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
三、fadeIn(); fadeOut(); fadeTo();
语法格式:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
说明:
fadeTo() 函数中的 opacity (可选)参数规定减弱到给定的不透明度
四、animate();
语法格式:
$(selector).animate({params},[duration],[easing],[callback])
说明:
params:(必需)该变化的目标css样式
duration:(可选)类似上面的speed,设置该变化的速度,有slow, fast, normal或具体毫秒值可以选。
easing:(可选)设置动画不同时间点的速度,备选swing, linear,更多效果需要扩展插件。(没有试验过具体效果)
callback:(可选)同上。
实例:
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
未完待续……