jquery效果(zz)

 ●  hide()
Javascript代码 复制代码
  1. /**  
  2.  * 隐藏显示的元素。  
  3.  *  
  4.  * 这个就是 "hide( speed, [callback] )" 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变  
  5.  * 任何东西。  
  6.  *   
  7.  * @return jQuery Object  
  8.  * @owner jQuery Object  
  9.  */  
  10. function hide();   
  11.   
  12. // 例子：隐藏所有段落。   
  13. $("p").hide();  


    ●  hide(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。  
  5.  *  
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数，每个元素执行一次  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function hide(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒的时间将段落缓慢的隐藏。   
  15. $("p").hide("slow");   
  16.   
  17. // 例子二：用 200 毫秒将段落迅速隐藏，之后弹出一个对话框。   
  18. $("p").hide("fast", function() {   
  19.    alert("Animation Done.");   
  20. });  


    ●  show()
Javascript代码 复制代码
  1. /**  
  2.  * 显示隐藏的匹配元素。  
  3.  *  
  4.  * 这个就是 "show( speed, [callback] )" 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任  
  5.  * 何东西。无论这个元素是通过 hide() 方法隐藏的还是在 CSS 里设置了 display:none; 这个方法都将有效。  
  6.  *  
  7.  * @return jQuery Object  
  8.  * @owner jQuery Object  
  9.  */  
  10. function show();   
  11.   
  12. // 例子：显示所有段落。   
  13. $("p").show();  


    ●  show(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 显以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。  
  5.  *  
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数，每个元素执行一次  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function show(speed, [callback]);   
  13.   
  14. // 例子一：用缓慢的动画将隐藏的段落显示出来，历时 600 毫秒。   
  15. $("p").show("slow");   
  16.   
  17. // 例子二：用迅速的动画将隐藏的段落显示出来，历时 200 毫秒。并在之后执行反馈。   
  18. $("p").show("fast", function() {   
  19.    $(this).text("Animation Done!");   
  20. });   
  21.   
  22. // 例子三：将隐藏的段落用将近 4 秒的时间显示出来，并在之后执行一个反馈。   
  23. $("p").show(4000, function() {   
  24.    $(this).text("Animation Done...");   
  25. });  


    ●  toggle()
Javascript代码 复制代码
  1. /**  
  2.  * 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。  
  3.  *   
  4.  * @return jQuery Object  
  5.  * @owner jQuery Object  
  6.  */  
  7. function toggle();   
  8.   
  9. // 例子：切换所有段落的可见状态。   
  10. <p>Hello</p>   
  11. <p style="display: none">Hello Again</p>   
  12.   
  13. $("p").toggle() -> <p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>  


    ●  slideDown(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 通过高度变化(向下增大)来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画效果只调整元素的高度，可以使匹配的元素以 "滑动" 的方式显示出来。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function slideDown(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒缓慢的将段落滑下。   
  15. $("p").slideDown("slow");   
  16.   
  17. // 例子二：用 200 毫秒快速将段落滑下，之后弹出一个对话框。   
  18. $("p").slideDown("fast", function(){   
  19.    alert("Animation Done.");   
  20. });  


    ●  slideToggle(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画效果只调整元素的高度，可以使匹配的元素以 "滑动" 的方式隐藏或显示。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function slideToggle(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒缓慢的将段落滑上或滑下。   
  15. $("p").slideToggle("slow");   
  16.   
  17. // 例子二：用 200 毫秒快速将段落滑上或滑下，之后弹出一个对话框。   
  18. $("p").slideToggle("fast", function() {   
  19.    alert("Animation Done.");   
  20. });  


    ●  slideUp(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 通过高度变化(向上减小)来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画效果只调整元素的高度，可以使匹配的元素以 "滑动" 的方式隐藏起来。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function slideUp(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒缓慢的将段落滑上。   
  15. $("p").slideUp("slow");   
  16.   
  17. // 例子二：用 200 毫秒快速将段落滑上，之后弹出一个对话框。   
  18. $("p").slideUp("fast", function() {   
  19.    alert("Animation Done.");   
  20. });  


    ●  fadeIn(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function fadeIn(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒缓慢的将段落淡入。   
  15. $("p").fadeIn("slow");   
  16.   
  17. // 例子二：用 200 毫秒快速将段落淡入，之后弹出一个对话框。   
  18. $("p").fadeIn("fast", function() {   
  19.    alert("Animation Done.");   
  20. });  


    ●  fadeOut(speed, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function fadeOut(speed, [callback]);   
  13.   
  14. // 例子一：用 600 毫秒缓慢的将段落淡出。   
  15. $("p").fadeOut("slow");   
  16.   
  17. // 例子二：用 200 毫秒快速将段落淡出，之后弹出一个对话框。   
  18. $("p").fadeOut("fast", function() {   
  19.    alert("Animation Done.");   
  20. });  


    ●  fadeTo(speed, opacity, [callback])
Javascript代码 复制代码
  1. /**  
  2.  * 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。  
  3.  *  
  4.  * 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。  
  5.  *   
  6.  * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast")  
  7.  *                        或表示动画时长的毫秒数值(如：1000)  
  8.  * @opacity(Number) 要调整到的不透明度值(0到1之间的数字)  
  9.  * @callback(Function) (可选) 在动画完成时执行的函数  
  10.  * @return jQuery Object  
  11.  * @owner jQuery Object  
  12.  */  
  13. function fadeTo(speed, opacity, [callback]);   
  14.   
  15. // 例子一：用 600 毫秒缓慢的将段落的透明度调整到 0.66，大约 2/3 的可见度。   
  16. $("p").fadeTo("slow", 0.66);   
  17.   
  18. // 例子二：用 200 毫秒快速将段落的透明度调整到 0.25，大约 1/4 的可见度，之后弹出一个对话框。   
  19. $("p").fadeTo("fast", 0.25, function() {   
  20.    alert("Animation Done.");   
  21. });  


    ●  animate(params, options)
Javascript代码 复制代码
  1. /**  
  2.  * 用于创建自定义动画的函数。  
  3.  *  
  4.  * 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式  
  5.  * 属性(如 "height", "top" 或 "opacity")。注意：所有指定的属性必须用骆驼形式，比如用 marginLeft  
  6.  * 代替 margin-left。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就  
  7.  * 会从当前的值渐变到指定的值。如果使用的是 "hide", "show" 或 "toggle" 这样的字符串值，则会为该  
  8.  * 属性调用默认的动画形式。  
  9.  *  
  10.  * 在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定  
  11.  * "+=" 或 "-=" 来让元素做相对运动。  
  12.  *   
  13.  * @params(Options) 一组包含作为动画属性和终值的样式属性和及其值的集合  
  14.  * @options(Options) 一组包含动画选项的值的集合  
  15.  *    1. duration(String, Number) (默认值: "normal") 三种预定速度之一的字符串("slow",   
  16.  *       "normal", or "fast")或表示动画时长的毫秒数值(如：1000)  
  17.  *    2. easing(String) (默认值: "swing") 要使用的擦除效果的名称(需要插件支持)。默认 jQuery   
  18.  *       提供 "linear" 和 "swing"  
  19.  *    3. complete(Function) 在动画完成时执行的函数  
  20.  *    4. step(Callback)  
  21.  *    5. queue(Boolean) (默认值: true) 设定为 false 将使此动画不进入动画队列(jQuery 1.2中新增)  
  22.  * @return jQuery Object  
  23.  * @owner jQuery Object  
  24.  */  
  25. function animate(params, options);   
  26.   
  27. // 例子一：第一个按钮按了之后展示了不在队列中的动画。在 div 扩展到 90% 的同时也在增加字体，一旦字体   
  28. //         改变完毕后，边框的动画才开始。第二个按钮按了之后就是一个传统的链式动画，即等前一个动画完   
  29. //         成后，后一个动画才会开始。   
  30. <button id="go1">? Animate Block1</button>   
  31. <button id="go2">? Animate Block2</button>   
  32. <div id="block1">Block1</div><div id="block2">Block2</div>   
  33.   
  34. $("#go1").click(function() {   
  35.   $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )   
  36.      .animate( { fontSize: '10em' } , 1000 )   
  37.      .animate( { borderWidth: 5 }, 1000);   
  38. });   
  39.   
  40. $("#go2").click(function(){   
  41.   $("#block2").animate( { width: "90%"}, 1000 )   
  42.      .animate( { fontSize: '10em' } , 1000 )   
  43.      .animate( { borderWidth: 5 }, 1000);   
  44. });   
  45.   
  46. // 例子二：用 600 毫秒切换段落的高度和透明度。   
  47. $("p").animate({   
  48.    height: 'toggle', opacity: 'toggle'  
  49.  }, { duration: "slow" });   
  50.     
  51. // 例子三：用 500 毫秒将段落移到 left 为 50 的地方并且完全清晰显示出来(透明度为1)。   
  52. $("p").animate({   
  53.    left: 50, opacity: 'show'  
  54.  }, { duration: 500 });   
  55.     
  56. // 例子四：一个使用 "easein" 函数提供不同动画样式的例子。只有使用了插件来提供这个" easein" 函数，   
  57. //         这个参数才起作用。    
  58. $("p").animate({   
  59.    opacity: 'show'  
  60.  }, { duration: "slow", easing: "easein" });  


    ●  animate(params [, duration[, easing[, callback]]])
Javascript代码 复制代码
  1. /**  
  2.  * 描述同 animate(params, options)  
  3.  *   
  4.  * @params(Options) 一组包含作为动画属性和终值的样式属性和及其值的集合  
  5.  * @duration(String, Number) (可选) 三种预定速度之一的字符串("slow", "normal", or   
  6.  *                           "fast")或表示动画时长的毫秒数值(如：1000)  
  7.  * @easing(String) (可选) 要使用的擦除效果的名称(需要插件支持)。默认jQuery提供"linear"和"swing"  
  8.  * @callback(Function) (可选) 在动画完成时执行的函数  
  9.  * @return jQuery Object  
  10.  * @owner jQuery Object  
  11.  */  
  12. function animate(params [, duration[, easing[, callback]]]);   
  13.   
  14. // 例子一：点击按钮后 div 元素的几个不同属性一同变化。   
  15. <button id="go"> Run</button>   
  16. <div id="block">Hello!</div>   
  17.   
  18. // 在一个动画中同时应用三种类型的效果   
  19. $("#go").click(function(){   
  20.   $("#block").animate({    
  21.     width: "90%",   
  22.     height: "100%",    
  23.     fontSize: "10em",    
  24.     borderWidth: 10   
  25.   }, 1000 );   
  26. });   
  27.   
  28. // 例子二：让指定元素左右移动。   
  29. <button id="left">?</button> <button id="right">?</button>   
  30. <div class="block"></div>   
  31.   
  32. $("#right").click(function(){   
  33.   $(".block").animate({left: '+50px'}, "slow");   
  34. });   
  35.   
  36. $("#left").click(function(){   
  37.   $(".block").animate({left: '-50px'}, "slow");   
  38. });   
  39.     
  40. // 例子三：在 600 毫秒内切换段落的高度和透明度。   
  41. $("p").animate({   
  42.    height: 'toggle', opacity: 'toggle'  
  43.  }, "slow");   
  44.     
  45. // 例子四：用 500 毫秒将段落移到 left 为 50 的地方并且完全清晰显示出来(透明度为1)。   
  46. $("p").animate({   
  47.    left: 50, opacity: 'show'  
  48.  }, 500);   
  49.     
  50. // 例子五：一个使用 "easein" 函数提供不同动画样式的例子。只有使用了插件来提供这个 "easein" 函数，   
  51. //         这个参数才起作用。   
  52. $("p").animate({   
  53.    opacity: 'show'  
  54.  }, "slow", "easein");  


    ●  dequeue()
Javascript代码 复制代码
  1. /**  
  2.  * 从动画队列中移除一个队列函数。  
  3.  *   
  4.  * @return jQuery Object  
  5.  * @owner jQuery Object  
  6.  */  
  7. function dequeue();   
  8.   
  9. // 例子：   
  10. <style>   
  11.   div { margin:3px; width:50px; position:absolute;   
  12.         height:50px; left:10px; top:30px;    
  13.         background-color:yellow; }   
  14.   div.red { background-color:red; }   
  15. </style>   
  16.   
  17. <button>Start</button>   
  18. <div></div>   
  19.   
  20. $("button").click(function() {   
  21.   $("div").animate({left:'+=200px'}, 2000);   
  22.   $("div").animate({top:'0px'}, 600);   
  23.   $("div").queue(function () {   
  24.       $(this).toggleClass("red");   
  25.       $(this).dequeue();   
  26.   });   
  27.   $("div").animate({left:'10px', top:'30px'}, 700);   
  28. });  


    ●  queue()
Javascript代码 复制代码
  1. /**  
  2.  * 返回指向第一个匹配元素的队列(将是一个函数数组)。  
  3.  *   
  4.  * @return Array<Function>  
  5.  * @owner jQuery Object  
  6.  */  
  7. function queue();   
  8.   
  9. // 例子：显示队列长度。   
  10. <style>   
  11.   div { margin:3px; width:40px; height:40px;   
  12.         position:absolute; left:0px; top:30px;    
  13.         background:green; display:none; }   
  14.   div.newcolor { background:blue; }   
  15.   span { color:red; }   
  16. </style>   
  17.   
  18. <button id="show">Show Length of Queue</button>   
  19. <span></span>   
  20. <div></div>   
  21.   
  22. $("#show").click(function () {   
  23.     var n = $("div").queue("fx");   
  24.     $("span").text("Queue length is: " + n.length);   
  25. });   
  26. function runIt() {   
  27.     $("div").show("slow");   
  28.     $("div").animate({left:'+=200'},2000);   
  29.     $("div").slideToggle(1000);   
  30.     $("div").slideToggle("fast");   
  31.     $("div").animate({left:'-=200'},1500);   
  32.     $("div").hide("slow");   
  33.     $("div").show(1200);   
  34.     $("div").slideUp("normal", runIt);   
  35. }   
  36. runIt();  


    ●  queue(callback)
Javascript代码 复制代码
  1. /**  
  2.  * 在匹配的元素的动画队列中添加一个函数。  
  3.  *   
  4.  * @callback(Function) 要添加进队列的函数  
  5.  * @return jQuery Object  
  6.  * @owner jQuery Object  
  7.  */  
  8. function queue(callback);   
  9.   
  10. // 例子：插入一个自定义函数，如果函数执行后要继续队列，则执行 jQuery(this).dequeue();。   
  11. <style>   
  12.   div { margin:3px; width:40px; height:40px;   
  13.         position:absolute; left:0px; top:30px;    
  14.         background:green; display:none; }   
  15.   div.newcolor { background:blue; }   
  16. </style>   
  17.   
  18. Click here...   
  19. <div></div>   
  20.   
  21. $(document.body).click(function() {   
  22.     $("div").show("slow");   
  23.     $("div").animate({left:'+=200'},2000);   
  24.     $("div").queue(function () {   
  25.         $(this).addClass("newcolor");   
  26.         $(this).dequeue();   
  27.     });   
  28.     $("div").animate({left:'-=200'},500);   
  29.     $("div").queue(function () {   
  30.         $(this).removeClass("newcolor");   
  31.         $(this).dequeue();   
  32.     });   
  33.     $("div").slideUp();   
  34. });  


    ●  queue(queue)
Javascript代码 复制代码
  1. /**  
  2.  * 将匹配元素的动画队列用新的一个队列来代替(函数数组)。  
  3.  *   
  4.  * @queue(Array<Function>) 用于替换的队列。所有函数都有同一个参数，这个值与 queue(callback) 相同  
  5.  * @return queue  
  6.  * @owner jQuery Object  
  7.  */  
  8. function queue(queue);   
  9.   
  10. // 例子：通过设定队列数组来删除动画队列。   
  11. <style>   
  12.   div { margin:3px; width:40px; height:40px;   
  13.         position:absolute; left:0px; top:30px;    
  14.         background:green; display:none; }   
  15.   div.newcolor { background:blue; }   
  16. </style>   
  17.   
  18. <button id="start">Start</button>   
  19. <button id="stop">Stop</button>   
  20. <div></div>   
  21.   
  22. $("#start").click(function () {   
  23.     $("div").show("slow");   
  24.     $("div").animate({left:'+=200'},5000);   
  25.     $("div").queue(function () {   
  26.         $(this).addClass("newcolor");   
  27.         $(this).dequeue();   
  28.     });   
  29.     $("div").animate({left:'-=200'},1500);   
  30.     $("div").queue(function () {   
  31.         $(this).removeClass("newcolor");   
  32.         $(this).dequeue();   
  33.     });   
  34.     $("div").slideUp();   
  35. });   
  36. $("#stop").click(function () {   
  37.     $("div").queue("fx", []);   
  38.     $("div").stop();   
  39. });  


    ●  stop()
Javascript代码 复制代码
  1. /**  
  2.  * 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画，他们将被马上执行。  
  3.  *   
  4.  * @queue(Array<Function>) 用于替换的队列。所有函数都有同一个参数，这个值与 queue(callback) 相同  
  5.  * @return jQuery Object  
  6.  * @owner jQuery Object  
  7.  */  
  8. function stop();   
  9.   
  10. // 例子：点击 Go 之后开始动画,点 Stop 之后会在当前位置停下来。   
  11. <button id="go">Go</button> <button    
  12. id="stop">STOP!</button>   
  13. <div class="block"></div>   
  14. <button id="go">Go</button> <button    
  15. id="stop">STOP!</button>   
  16. <div class="block"></div>   
  17.   
  18. // 开始动画   
  19. $("#go").click(function() {   
  20.   $(".block").animate({left: '+200px'}, 5000);   
  21. });   
  22.   
  23. // 当点击按钮后停止动画   
  24. $("#stop").click(function(){   
  25.   $(".block").stop();   
  26. });  

posted on 2010-03-17 14:31  Snowwolf  阅读(308)  评论(0)  编辑  收藏  举报

导航