码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

时间:2017-08-30 15:51:36      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:selector   fadeout   tor   ast   名称   隐藏   out   fun   slow   

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

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
(可选)speed  参数:规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
(可选)callback 参数:是隐藏或显示完成后所执行的函数名称
 
 
例1:使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

<body>
  <p>如果你点击“隐藏” 按钮,我将会消失。</p>
  <button id="hide">隐藏</button>
  <button id="show">显示</button>
</body>

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

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(1000);
  });
  $("#show").click(function(){
    $("p").show(1000);
  });
});
</script>

<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<p>这是个段落,内容比较少。</p>
<p>这是另外一个小段落</p>
</body>

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

例3:显示被隐藏的元素,并隐藏已显示的元素:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>

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

 

jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

标签:selector   fadeout   tor   ast   名称   隐藏   out   fun   slow   

原文地址:http://www.cnblogs.com/wuss/p/7452736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!