jQuery 效果
Posted 叶子玉
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 效果相关的知识,希望对你有一定的参考价值。
显示和隐藏
1. show(speed) :speed 可以取:slow/fast/毫秒
1 $("#show").click(function(){ 2 $("p").show(1000); 3 });
2. hide(speed) :
1 $("#hide").click(function(){ 2 $("p").hide(); 3 });
3. toggle() :切换 show() 和 hide() 方法
1 $("button").click(function(){ 2 $("p").toggle(); 3 });
淡入淡出
1. fadeIn(speed) :淡入已隐藏的元素
1 $("button").click(function(){ 2 $("div").fadeIn(); 3 });
2. fadeOut(speed) :淡出可见元素
1 $("button").click(function(){ 2 $("div").fadeOut(); 3 });
3. fadeToggle(speed) :在前两个方法之间切换
1 $("button").click(function(){ 2 $("div").fadeToggle(); 3 });
4. fadeTo(speed, opacity) :允许渐变为给定的不透明度(0-1)
1 $("button").click(function(){ 2 $("div").fadeTo("slow",.3); 3 });
滑动
1. slideDown() :向下滑动元素
1 $("div1").click(function(){ 2 $("div2").slideDown(); 3 });
2. slideUp() :向上滑动元素
1 $("div1").click(function(){ 2 $("div2").slideUp(); 3 });
3. slideToggle() :在前两个方法之间切换
1 $("div1").click(function(){ 2 $("div2").slideToggle(); 3 });
动画
animate() :
1. 操作单个属性
1 $("button").click(function(){ 2 $("div").animate({left:‘300px‘}); 3 });
2. 操作多个属性
1 $("button").click(function(){ 2 $("div").animate({ 3 left:‘300px‘, 4 width:‘300px‘, 5 height:‘300px‘, 6 opacity:‘.3‘ 7 }); 8 });
3. 使用相对值
1 $("button").click(function(){ 2 $("div").animate({ 3 left:‘300px‘, 4 width:‘+=300px‘, 5 height:‘+=300px‘, 6 opacity:‘.3‘ 7 }); 8 });
4. 使用预定义值:动画的值可以设置为:show/hide/toggle
1 $("button").click(function(){ 2 $("div").animate({ 3 height:‘toggle‘ 4 }); 5 });
5. 队列功能
1 $("button").click(function(){ 2 var div = $("div"); 3 div.animate({width:‘300px‘,opacity:‘.3‘,"slow"}); 4 div.animate({height:‘300px‘,opacity:‘.6‘,"slow"}); 5 div.animate({width:‘100px‘,opacity:‘.3‘,"slow"}); 6 div.animate({height:‘100px‘,opacity:‘.8‘,"slow"}); 7 });
停止动画
stop() :
1 $("#stop").click(function(){ 2 $("#panel").stop(); 3 });
callback
效果完全实现以后回调函数,如果没有回调函数,效果会在完成前弹出
1 $("button").click(function(){ 2 $("p").hide("slow",function(){ 3 alert("段落隐藏了"); 4 }); 5 });
以上是关于jQuery 效果的主要内容,如果未能解决你的问题,请参考以下文章