博客

jQuery隐藏、显示、切换和渐变的方法与实例

  • Post category:jquery

jQuery隐藏、显示、切换和渐变的方法与实例

在jQuery中，隐藏、显示、切换和渐变是一些常用的操作。下面将具体介绍如何使用jQuery的方法实现这些操作。

隐藏元素

在jQuery中，可以使用hide()方法隐藏被选中的元素，语法如下：

$(selector).hide(speed, callback)

其中selector是待隐藏的元素的选择器，speed是渐变的速度，单位可以是毫秒或是关键字"fast"、"slow"，可选参数，如果不设置，元素会立即被隐藏，callback是可选参数，是一个回调函数，在动画完成的时候执行。

示例1：使用hide()方法隐藏一个<div>元素

<div class="myDiv">示例文本</div>
<button class="btn">隐藏源码</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("div.myDiv").hide();
    });
  });
</script>

示例2：使用hide()方法隐藏一个<p>元素，渐变时间为1000毫秒

<p class="myP">示例文本</p>
<button class="btn">渐隐</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("p.myP").hide(1000);
    });
  });
</script>

显示元素

在jQuery中，可以使用show()方法显示被选中的元素，语法如下：

$(selector).show(speed, callback)

其中selector是待显示的元素的选择器，speed是渐变的速度，单位可以是毫秒或是关键字"fast"、"slow"，可选参数，如果不设置，元素会立即被显示，callback是可选参数，是一个回调函数，在动画完成的时候执行。

示例3：使用show()方法显示一个<div>元素

<div class="myDiv" style="display:none">示例文本</div>
<button class="btn">显示文本</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("div.myDiv").show();
    });
  });
</script>

示例4：使用show()方法显示一个<p>元素，渐变时间为500毫秒

<p class="myP" style="display:none">示例文本</p>
<button class="btn">渐现</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("p.myP").show(500);
    });
  });
</script>

切换显示和隐藏元素

在jQuery中，可以使用toggle()方法切换被选中的元素的显示和隐藏状态，语法如下：

$(selector).toggle(speed, callback)

其中selector是待切换显示和隐藏的元素的选择器，speed是渐变的速度，单位可以是毫秒或是关键字"fast"、"slow"，可选参数，如果不设置，元素会从当前状态切换到相反状态，callback是可选参数，是一个回调函数，在动画完成的时候执行。

示例5：使用toggle()方法切换一个<div>元素的显示和隐藏状态

<div class="myDiv" style="display:none">示例文本</div>
<button class="btn">切换源码</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("div.myDiv").toggle();
    });
  });
</script>

示例6：使用toggle()方法切换一个<p>元素的显示和隐藏状态，渐变时间为200毫秒

<p class="myP" style="display:none">示例文本</p>
<button class="btn">渐变切换</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("p.myP").toggle(200);
    });
  });
</script>

渐变显示和隐藏元素

在jQuery中，可以使用fadeIn()和fadeOut()方法分别实现渐变显示和隐藏被选中的元素，语法如下：

$(selector).fadeIn(speed, callback)
$(selector).fadeOut(speed, callback)

其中selector是待渐变显示或隐藏的元素的选择器，speed是渐变的速度，单位可以是毫秒或是关键字"fast"、"slow"，可选参数，如果不设置，元素会立即渐变显示或隐藏，callback是可选参数，是一个回调函数，在动画完成的时候执行。

示例7：使用fadeIn()方法渐变显示一个<div>元素

<div class="myDiv" style="display:none">示例文本</div>
<button class="btn">渐变显示源码</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("div.myDiv").fadeIn();
    });
  });
</script>

示例8：使用fadeOut()方法渐变隐藏一个<p>元素，渐变时间为400毫秒

<p class="myP">示例文本</p>
<button class="btn">渐变隐藏</button>
<script>
  $(document).ready(function(){
    $("button.btn").click(function(){
      $("p.myP").fadeOut(400);
    });
  });
</script>

以上就是jQuery隐藏、显示、切换和渐变的常用方法及实例说明。

Tags: