详解jQuery使用.show()/.fadeIn()淡入指定元素

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

.show()/.fadeIn() 的作用是什么？

.show()/.fadeIn()可以“淡入显示display:none状态看不见的元素”。

要在两者中淡入淡出，只需将参数放在毫秒内，反之，如果您没有在参数中放置任何内容，它将立即显示。

需注意的是要淡入的对象是要处于CSS style状态的对象为display:none，或者是被.hide()方法“隐藏”的对象。

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

.show()/.fadeIn()之间的区别

.show()/.fadeIn() 之间的唯一区别是显示时的动画。

.show()在动画时从上到下显示，而fadeIn()是当即显示。

.show()/.fadeIn() 语法

.show()语法

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

.fadeIn()语法

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

指定毫秒作为参数淡入的语法

.show().fadeIn()通过将参数指定为“毫秒”来淡入，只需在 () 中输入毫秒值，如下所示。（1 秒是 1000 毫秒）

$("选择器").show(3000);
$("选择器").fadeIn(3000);

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

.show().fadeIn()通过在参数中放置回调函数，可以在淡入显示后添加一些处理。

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

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

使用 .show()/.fadeIn() 的示例

通过单击按钮淡入目标的示例

让我们看一个在单击按钮时淡入示例文本的示例。

HTML

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

show()

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

fadeIn()

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

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

淡入后使用回调函数的示例

HTML

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

show()

$(function(){
  $('button').on('click', function() {
    $('.target').show(1000, function(){
      $('this').css("color","red");
    });
  });
});

fadeIn()

$(function(){
  $('button').on('click', function() {
    $('.target').fadeIn(1000, function(){
      $('this').css("color","red");
    });
  });
});

在此示例中，单击button将隐藏元素(display:none;)在1000毫秒（1 秒）内淡入。

通过添加调函数将class="target"的CSS颜色变为红色red。