jquery效果 显示隐藏 滑入滑出

jquery

jquery效果

jquery 给我们封装了很多动画效果，最为常见的如下：

• 显示隐藏：show() / hide() / toggle() ;
• 滑入滑出：slideDown() / slideUp() / slideToggle() ;
• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
• 自定义动画：animate() ;

1、显示与隐藏

1）.显示 show（[speed,callback]）

      显示被选的元素

参数：

• spend：可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
  可能的值：毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。**
  **-

• callback：可选。show 函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。**

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){   //点击按钮
  $("p").show();   //p元素显示
  });
</script>

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

2）.隐藏 hide[speed,callback]）

     如果被选的元素已被显示，则隐藏该元素。

参数：

**

• spend：可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
  可能的值：毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。**
  **-

• callback：可选。hide函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。**

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){   //点击按钮
  $("p").hide();   //p元素隐藏
  });
</script>

3）切换 toggle(speed,callback,switch)

     toggle() 方法切换元素的可见状态。
     如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

参数：

• spend：可选。规定元素从可见到隐藏的速度（或者相反）。默认为 “normal”。
  可能的值：
  毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
  如果设置此参数，则无法使用 switch 参数。**
  **-

• callback：可选。toggle 函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。**

• switch：可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
  True - 显示所有元素
  False - 隐藏所有元素
  如果设置此参数，则无法使用 speed 和 callback 参数。

<script type="text/javascript">
$(document).ready(function(){    //点击按钮
  $(".btn1").click(function(){    
  $("p").toggle();         //切换显示/隐藏
  });
});
</script>

2、滑入与滑出

（1）slideDown()

         定义：slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
         语法：slideDown(speed,callback)；

参数：

• spend：可选。规定元素从可见到隐藏的速度（或者相反）。默认为 “normal”。
  可能的值：
  毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度。
  **-

• callback：可选。slideDown 函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。

//以滑动方式显示的 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideDown();
  });
});
</script>

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

（2）slideUp()

         定义：slideUp() 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
         语法：slideUp(speed,callback)；

参数：

• spend：可选。规定元素从可见到隐藏的速度（或者相反）。默认为 “0”。
  可能的值：
  毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度。
  **-

• callback：可选。slideUp函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。

//以滑动方式隐藏的 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideUp();
  });
});
</script>

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

（3）slideToggle()

         定义：slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
         如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
         语法：slideToggle(speed,callback)；

参数：

• spend：可选。规定元素从可见到隐藏的速度（或者相反）。默认为 “normal”。
  可能的值：毫秒 （比如 1500）
  “slow”
  “normal”
  “fast”
  在设置速度的情况下，元素在切换过程中，会逐渐地改变其高度（这样会创造滑动效果）。
  **-

• callback：可选。toggle 函数执行完之后，要执行的函数。
  除非设置了 speed 参数，否则不能设置该参数。

//通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>

今天就先写到这儿，后期会持续更新!