jQuery除了显示和隐藏效果外,还有很多其他效果,使用方式类似,这里便直接列出,不给予实例。
淡入淡出效果:
jQuery拥有四种fade方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn()方法
fadeIn方法用于淡入已隐藏的元素(将隐藏元素显示)
语法:
$(selector).fadeIn(speed,callback);可选的speed参数规定效果的时长。他可以取以下值:"slow"、"fast"或毫秒。
可选的callback参数是fading完成后所执行的函数名称。
jQuery fadeOut()方法
fadeOut方法用于淡出可见元素(将可见元素隐藏)
语法:
$(selector.fadeOut(speed,callback);speed和callback同上。
jQuery fadeToggle()方法
fadeToggle方法可以在fadeIn与fadeOut方法之间进行切换。
如果元素已淡出,则fadeToggle会向元素添加淡入效果。
如果元素已淡入,则fadeToggle会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);speed和callback同上。
jQuery fadeTo()方法
fadeTo方法允许渐变为给定的不透明度(值介于0到1之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);这里需要注意,speed是必须的参数,规定效果的时长,它可以取:"slow"、"fast"或毫秒
opacity参数为效果设置给定的不透明度。
可选的callback参数同上述。
滑动效果
jQuery滑动方法可使元素上下滑动
jQuery拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法用于向下滑动元素。(即将隐藏的元素向下滑动显示,需要用css将display设置为none)
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
实例:
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> //src使用你存储jquery的地址 <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; //在这里,display被设置为none } </style> </head> <body> <div class="panel"> <p>111111111111111</p> <p>000000000000000</p> </div> <p class="flip">请点击这里</p> </body>jQuery slideUp()方法
jQuery slideUp()方法用于向上滑动元素。(即把显示的元素向上滑动进行隐藏)
语法:
$(selector).slideUp(speed,callback);speed和callback参数同上
jQuery slideToggle()方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:
$(selector).slideToggle(speed,callback);speed和callback同上。