jQuery学习之七-----jQuery效果
1、jQuery的切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：$(selector).toggle(speed,callback)
speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
实例：
1 $("button").click(function(){ 2 $("p").toggle(); 3 });
callback 参数是在该函数完成之后被执行的函数名称。
2、jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
slideDown() 实例：
1 $(document).ready(function () { 2 $(".flip").click(function () { 3 $(".panel").slideDown("slow");
slideUp() 实例：
1 $(".flip").click(function(){ 2 $(".panel").slideUp("slow") 3 })
slideToggle() 实例:
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 $(".flip").click(function () { 4 $(".panel").slideToggle("slow"); 5 }); 6 }); 7 </script>
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
$(selector).fadeIn(speed,callback) 通过调整不透明度淡入所有匹配的元素。 $(selector).fadeOut(speed,callback) 将所有匹配元素的不透明度淡化为一个指定的不透明度。 $(selector).fadeTo(speed,opacity,callback) 将所有匹配元素的不透明度淡化为一个指定的不透明度。
speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。
代码示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>test fadeTo</title> 5 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("div").fadeTo("slow",0.25); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="test" style="background: yellow; width: 300px; height: 300px"> 16 <button type="button"> 17 点击这里查看淡出效果</button> 18 </div> 19 </body> 20 </html>
fadeOut() 示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Test fadeOut()</title> 5 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("#test").click(function () { 9 $(this).fadeOut("slow"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="test" style="background: yellow; width: 200px"> 16 CLICK ME AWAY!</div> 17 <p> 18 如果您点击上面的框，它会淡出直到消失为止。</p> 19 </body> 20 </html>
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#start").click(function(){ 4 $("#box").animate({height:300},"slow"); 5 $("#box").animate({width:300},"slow"); 6 $("#box").animate({height:100},"slow"); 7 $("#box").animate({width:100},"slow"); 8 }); 9 }); 10 </script>
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#start").click(function(){ 4 $("#box").animate({left:"100px"},"slow"); 5 $("#box").animate({fontSize:"3em"},"slow"); 6 }); 7 }); 8 </script>
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
jQuery效果的函数总结：
| 函数 | 描述 |
|---|---|
| $(selector).hide() | 隐藏被选元素 |
| $(selector).show() | 显示被选元素 |
| $(selector).toggle() | 切换（在隐藏与显示之间）被选元素 |
| $(selector).slideDown() | 向下滑动（显示）被选元素 |
| $(selector).slideUp() | 向上滑动（隐藏）被选元素 |
| $(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
| $(selector).fadeIn() | 淡入被选元素 |
| $(selector).fadeOut() | 淡出被选元素 |
| $(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
| $(selector).animate() | 对被选元素执行自定义动画 |