详解jQuery使用.hide()/.fadeOut() 淡出和隐藏指定元素

jQuery的“.hide()/.fadeOut()”是一种可以在淡出的同时隐藏指定元素的方法

这一次，我们通过一个示例来解释如何使用jQuery 的“.hide( )/.fadeOut()”。

.hide()/.fadeOut() 的作用是什么？

.hide()/.fadeOut()可以“在淡出的同时隐藏指定元素”。

在这两种情况下，要淡出，只需输入参数毫秒，反之，如果您没有在参数中输入任何内容，它将立即消失。

.hide() 和 .fadeOut() 之间的区别

.hide() 和 .fadeOut() 之间的唯一区别是它们如何消失。

两者的区别在于，hide()向上滑动时消失，而.fadeOut()则原地消失。

.hide()/.fadeOut() 语法

.hide()语法

$("选择器").hide();

.fadeOut()语法

$("选择器").fadeOut();

通过指定毫秒作为参数淡出的语法

.hide().fadeOut()要通过以“毫秒”为单位指定参数来淡出，只需在 () 中以半角字母数字字符输入毫秒值，如下所示。（1 秒是 1000 毫秒）

$("选择器").hide(3000);
$("选择器").fadeOut(3000);

可以将回调函数指定为参数

.hide().fadeOut()可以在参数中放置一个回调函数，用于隐藏后添加一些处理。

$("选择器").hide(3000, function(){
  //隐藏后要添加的处理
});

$("选择器").fadeOut(3000, function(){
  //隐藏后要添加的处理
});

.hide()/.fadeOut()实例

通过单击按钮淡出指定元素示例

让我们看一个隐藏示例文本并在单击按钮时淡出的示例。

HTML代码

<button>隐藏</button>
<p class="target">示例文本</p>

.hide()示例

$(function(){
 $('button').on('click', function() {
  $('.target').hide(1000);
 });
});

.fadeOut()示例

$(function(){ $('button').on('click', function() {
$('.target').fadeOut(1000);
}); });

在此示例中，button单击将class="target"在 1000 毫秒（1 秒）内淡出相应的“示例文本”。

使用回调函数淡出后重新显示的示例

HTML示例

<button>隐藏</button>
<p class="target">示例文本</p>

.hide()示例

$(function(){
  $('button').on('click', function() {
    $('.target').hide(1000, function(){
      $(this).css("display","block");
    });
  });
});

.fadeOut()示例

$(function(){
  $('button').on('click', function() {
    $('.target').fadeOut(1000, function(){
      $(this).css("display","block");
    });
  });
});

在此示例中，button单击将class="target"在 1000 毫秒（1 秒）内淡出相应的“示例文本”。

此时指定display元素处于 none状态，所以通过在回调函数中将class=“target”的CSS状态为block，将会再次显示“示例文本”。