jQuery 效果- 隐藏hide()和显示show()

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
（可选）speed  参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
（可选）callback 参数：是隐藏或显示完成后所执行的函数名称。
 
例1：使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
  1. <script>
  2. $(document).ready(function(){
  3.   $("#hide").click(function(){
  4.     $("p").hide();
  5.   });
  6.   $("#show").click(function(){
  7.     $("p").show();
  8.   });
  9. });
  10. </script>
  11.  
  12. <body>
  13.   <p>如果你点击“隐藏” 按钮，我将会消失。</p>
  14.   <button id="hide">隐藏</button>
  15.   <button id="show">显示</button>
  16. </body>

例2：演示带有 speed 参数的 hide()和show()方法：

  1. <script>
  2. $(document).ready(function(){
  3.   $("#hide").click(function(){
  4.     $("p").hide(1000);
  5.   });
  6.   $("#show").click(function(){
  7.     $("p").show(1000);
  8.   });
  9. });
  10. </script>
  11.  
  12. <body>
  13. <button id="hide">隐藏</button>
  14. <button id="show">显示</button>
  15. <p>这是个段落，内容比较少。</p>
  16. <p>这是另外一个小段落</p>
  17. </body>

toggle() 方法：来切换 hide() 和 show() 方法

例3：显示被隐藏的元素，并隐藏已显示的元素：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("p").toggle();
  5.   });
  6. });
  7. </script>
  8.  
  9. <body>
  10. <button>隐藏/显示</button>
  11. <p>这是一个文本段落。</p>
  12. <p>这是另外一个文本段落。</p>
  13. </body>

jQuery 效果 - 淡入fadeIn() 淡出fadeOut()

（1） fadeIn()方法 ：用于淡入已隐藏的元素

语法:$(selector).fadeIn(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

（可选） callback 参数：是 fading 完成后所执行的函数名称。

例：带有不同参数的 fadeIn() 方法：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("#div1").fadeIn();
  5.     $("#div2").fadeIn("slow");
  6.     $("#div3").fadeIn(3000);
  7.   });
  8. });
  9. </script>
  10.  
  11. <body>
  12. <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
  13. <button>点击淡入 div 元素。</button>
  14. <br><br>
  15. <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
  16. <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
  17. <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
  18. </body>

（2）fadeOut() 方法：用于淡出可见元素

语法:$(selector).fadeOut(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

（可选） callback 参数：是 fading 完成后所执行的函数名称。

例：带有不同参数的 fadeOut() 方法：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("#div1").fadeOut();
  5.     $("#div2").fadeOut("slow");
  6.     $("#div3").fadeOut(3000);
  7.   });
  8. });
  9. </script>
  10.  
  11. <body>
  12. <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
  13. <button>点击淡出 div 元素。</button>
  14. <br><br>
  15. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
  16. <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
  17. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  18. </body>

（3） fadeToggle() 方法：可以在 fadeIn() 与 fadeOut() 方法之间进行切换

语法:$(selector).fadeToggle(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

（可选） callback 参数：是 fading 完成后所执行的函数名称。

例：带有不同参数的 fadeToggle() 方法：

  1. <script>
  2. $(document).ready(function(){
  3.     $("button").click(function(){
  4.         $("#div1").fadeToggle();
  5.         $("#div2").fadeToggle("slow");
  6.         $("#div3").fadeToggle(3000);
  7.     });
  8. });
  9. </script>
  10.  
  11. <body>
  12. <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
  13. <button>点击淡入/淡出</button>
  14. <br><br>
  15. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  16. <br>
  17. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  18. <br>
  19. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  20. </body>

（4）fadeTo() 方法：允许渐变为给定的不透明度（值介于 0 与 1 之间）

语法:$(selector).fadeTo(speed,opacity,callback);

（必需） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

（必需）opacity 参数：将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

（可选） callback 参数：是该函数完成后所执行的函数名称。

例：带有不同参数的 fadeTo() 方法：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("#div1").fadeTo("slow",0.15);
  5.     $("#div2").fadeTo("slow",0.4);
  6.     $("#div3").fadeTo("slow",0.7);
  7.   });
  8. });
  9. </script>
  10.  
  11. <body>
  12. <p>演示 fadeTo() 使用不同参数</p>
  13. <button>点我让颜色变淡</button>
  14. <br><br>
  15. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
  16. <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
  17. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  18. </body>

jQuery 效果 - slideDown() 向下 slideUp() 向上滑动

（1）slideDown() 方法：用于向下滑动元素。

语法:$(selector).slideDown(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

（可选） callback 参数：是滑动完成后所执行的函数名称。

例：实现#panel元素向下滑动显示

  1. <script>
  2. $(document).ready(function(){
  3.   $("#flip").click(function(){
  4.     $("#panel").slideDown("slow");
  5.   });
  6. });
  7. </script>
  8.  
  9. <style type="text/css">
  10. #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}
  11. #panel{padding:50px;display:none;}
  12. </style>
  13.  
  14. <body>
  15. <div id="flip">点我滑下面板</div>
  16. <div id="panel">Hello world!</div>
  17. </body>

（2）slideUp() 方法：用于向上滑动元素

语法:$(selector).slideUp(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

（可选） callback 参数：是滑动完成后所执行的函数名称。

例：实现#panel元素向上滑动隐藏

  1. <script>
  2. $(document).ready(function(){
  3.   $("#flip").click(function(){
  4.     $("#panel").slideUp("slow");
  5.   });
  6. });
  7. </script>
  8.  
  9. <style type="text/css">
  10. #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}
  11. #panel{padding:50px;/*display:none;*/}
  12. </style>
  13.  
  14. <body>
  15. <div id="flip">点我拉起面板</div>
  16. <div id="panel">Hello world!</div>
  17. </body>

（3）slideToggle() 方法：可以在 slideDown() 与 slideUp() 方法之间进行切换

语法:$(selector).slideToggle(speed,callback);

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

（可选） callback 参数：是滑动完成后所执行的函数名称。

例：实现#panel元素向上隐藏与向下滑动显示

  1. <script>
  2. $(document).ready(function(){
  3.   $("#flip").click(function(){
  4.     $("#panel").slideToggle("slow");
  5.   });
  6. });
  7. </script>
  8.  
  9. <style type="text/css">
  10. #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}
  11. #panel{padding:50px;display:none;}
  12. </style>
  13.  
  14. <body>
  15. <div id="flip">点我，显示或隐藏面板。</div>
  16. <div id="panel">Hello world!</div>
  17. </body>

jQuery 效果- 动画animate()

animate() 方法：用于创建自定义动画

语法：$(selector).animate({params},speed,callback);

（必需） params 参数：定义形成动画的 CSS 属性。

（可选） speed 参数：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

（可选） callback 参数：是动画完成后所执行的函数名称。

例1：把 <div> 元素往右边移动了 250 像素

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("div").animate({left:'250px'});
  5.   });
  6. });
  7. </script> 
  8.  
  9. <body>
  10. <button>开始动画</button>
  11. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  12. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  13. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  14. </div>

例2：生成动画的过程中可同时使用多个属性：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("div").animate({
  5.       left:'250px',
  6.       opacity:'0.5',
  7.       height:'150px',
  8.       width:'150px'
  9.     });
  10.     $("div").css("background-color","#FF0000");  //改变背景颜色
  11.   });
  12. });
  13. </script> 
  14.  
  15. <body>
  16. <button>开始动画</button>
  17. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  18. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  19. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  20. </div>

（3）可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("div").animate({
  5.       left:'250px',
  6.       height:'+=150px',
  7.       width:'+=150px'
  8.     });
  9.   });
  10. });
  11. </script> 
  12.  
  13. <body>
  14. <button>开始动画</button>
  15. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  16. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  17. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  18. </div>

（4）把属性的动画值设置为 "show显示"、"hide隐藏" 或 "toggle"切换：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("div").animate({
  5.       width:'toggle',
  6.       height:'toggle'
  7.     });
  8.   });
  9. });
  10. </script> 
  11.  
  12. <body>
  13. <button>开始动画</button>
  14. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  15. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  16. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  17. </body>

（5）在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     var div=$("div");
  5.     div.animate({height:'300px',opacity:'0.4'},"slow");
  6.     div.animate({width:'300px',opacity:'0.8'},"slow");
  7.     div.animate({height:'100px',opacity:'0.4'},"slow");
  8.     div.animate({width:'100px',opacity:'0.8'},"slow");
  9.   });
  10. });
  11. </script> 
  12.  
  13. <body>
  14. <button>开始动画</button>
  15. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  16. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  17. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  18. </body>

（6）把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     var div=$("div");
  5.     div.animate({left:'100px'},"slow");
  6.     div.animate({fontSize:'3em'},"slow");
  7.   });
  8. });
  9. </script> 
  10.  
  11. <body>
  12. <button>开始动画</button>
  13. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  14. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  15. <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
  16. </body>

jQuery 停止动画stop()

stop() 方法：用于停止动画或效果，在它们完成之前

语法:$(selector).stop(stopAll,goToEnd);

（可选） stopAll 参数：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

（可选）goToEnd 参数：规定是否立即完成当前动画。默认是 false。

（默认）stop()： 会清除在被选元素上指定的当前动画。

例：停止当前动画

  1. <script>
  2. $(document).ready(function(){
  3.   $("#flip").click(function(){
  4.     $("#panel").slideDown(5000);
  5.   });
  6.   $("#stop").click(function(){
  7.     $("#panel").stop();
  8.   });
  9. });
  10. </script>
  11.  
  12. <style type="text/css">
  13. #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}
  14. #panel{padding:50px;display:none;}
  15. </style>
  16.  
  17. <body>
  18. <button id="stop">停止滑动</button>
  19. <div id="flip">点我向下滑动面板</div>
  20. <div id="panel">Hello world!</div>
  21. </body>

jQuery Callback 方法

Callback 函数：在当前动画 100% 完成之后执行

例1：使用“Callback ”在隐藏效果完全实现后回调函数:——当隐藏后，提示“段落现在被隐藏了”

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("p").hide("slow",function(){
  5.       alert("段落现在被隐藏了");
  6.     });
  7.   });
  8. });
  9. </script>
  10.  
  11. <body>
  12. <button>隐藏</button>
  13. <p>我们段落内容，点击“隐藏”按钮我就会消失</p>
  14. </body>

例2：没有回调函数，警告框会在隐藏效果完成前弹出：——先提示“段落现在被隐藏了”，再隐藏

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("p").hide(1000);
  5.     alert("现在段落被隐藏了");//没有回调函数
  6.   });
  7. });
  8. </script>
  9. </head>
  10. <body>
  11. <button>隐藏</button>
  12. <p>这是一个段落，内容很少</p>
  13. </body>

jQuery - 链(Chaining)

Chaining ：允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

例1：把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

  1. <script>
  2. $(document).ready(function()
  3.   {
  4.   $("button").click(function(){
  5.     $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  6.   });
  7. });
  8. </script>
  9.  
  10. <body><p id="p1">文字说明!!</p><button>点我</button></body>

如果需要，我们也可以添加多个方法调用。

书写也可以很好地运行：——方便修改

  1. <script>
  2. $(document).ready(function()
  3.   {
  4.   $("button").click(function(){
  5.     $("#p1").css("color","red")
  6.       .slideUp(2000)
  7.       .slideDown(2000);
  8.   });
  9. });
  10. </script>
  11.  
  12. <body><p id="p1">文字说明!!</p> <button>点我</button> </body>

jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链的更多相关文章

  1. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  2. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  3. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  4. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  5. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  6. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  7. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  8. jQuery学习四——效果

    1.显示,隐藏: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </he ...

  9. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

随机推荐

  1. 【BZOJ2212】[POI2011]Tree Rotations （线段树合并）

    题解: 傻逼题 启发式合并线段树里面查$nlog^2$ 线段树合并顺便维护一下$nlogn$ 注意是叶子为n 总结点2n 代码: #include <bits/stdc++.h> usin ...

  2. python之 可迭代 迭代器 生成器

    0. 1.总结 (1) (a)iterable 可迭代(对象) 能力属性 指一个对象能够一次返回它的一个成员,for i in a_list 而不需要通过下标完成迭代. 例子包括所有序列类型(list ...

  3. Flask Web中用MySQL代替SQLite

    由于.sqlite文件操作的诸多不便,决定常识用MySQL代替书上的SQLite作为数据库. 1.在虚拟环境中安装mysql-Python具体步骤为: <1> 安装python-dev s ...

  4. sparkStreaming消费kafka-1.0.1方式：direct方式（存储offset到zookeeper）-- 2

    参考上篇博文:https://www.cnblogs.com/niutao/p/10547718.html 同样的逻辑,不同的封装 package offsetInZookeeper /** * Cr ...

  5. ELK使用3-Logstash

    一.命令行输入输出操作 1.命令行输出: /application/elk/logstash/bin/logstash -e 'input { stdin{} } output { stdout{} ...

  6. JVM笔记（虚拟机各内存的介绍）

    JVM笔记 java代码执行分为两部分:javac编译     java执行 代码并不是由上往下执行的,会经过编译期重排序进行优化,存在依赖关系的代码不会被重排序,保证了代码最终执行结果的正确性! j ...

  7. Cforeach的详细用法--【转】

    运行截图: <!-- 多选框-还需要实现true选中和分行 --> <c:forEach items="${users}" var="item" ...

  8. CSS规范 - 分类方法

    CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

  9. 一个简单需求：HashMap实现相同key存入数据后不被覆盖

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 看似是一个简单的问题,其实里面包含很多的东西! 需求: 实现一个在HashMap中存入(任意类型)相同的key值后,key ...

  10. basename

    我使用过的Linux命令之basename - 去掉文件名的目录和后缀 本文链接:http://codingstandards.iteye.com/blog/840784   (转载请注明出处) 用途 ...