[b]jQuery 自定义动画[/b]
jQuery 函数创建自定义动画的语法:
关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性:
第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是:"slow", "fast", "normal" 或 毫秒。
实例 1
实例 2
HTML 元素默认是静态定位,且无法移动。
如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
[b]jQuery 效果 - 来自本页[/b]
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
更多的效果:jQuery 参考手册 - 效果 [url]http://www.w3school.com.cn/jquery/jquery_ref_effects.asp[/url]
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是:"slow", "fast", "normal" 或 毫秒。
实例 1
<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>
实例 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML 元素默认是静态定位,且无法移动。
如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
[b]jQuery 效果 - 来自本页[/b]
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
更多的效果:jQuery 参考手册 - 效果 [url]http://www.w3school.com.cn/jquery/jquery_ref_effects.asp[/url]