jQuery |效果 show() 方法

jQuery 的 show() 方法是用来显示被选元素的动画效果。该方法可以将元素从隐藏变为可见，同时可以指定动画的执行时间和完成后的回调函数。

语法

show() 方法的基本语法如下：

$(selector).show(speed, callback);

参数说明：

• selector：必选参数，用于指定要显示的元素。
• speed：可选参数，用于指定动画的执行时间，可以是毫秒数或 "slow"、"fast"等字符串。若未指定该参数，则动画不会执行，元素会立即显示。
• callback：可选参数，表示动画完成后要执行的回调函数。

示例

<!-- HTML 代码 -->
<button id="btn-show">显示文本</button>
<p id="text" style="display: none;">Hello, world!</p>

// 显示文本的按钮单击事件处理
$('#btn-show').click(function(){
  $('#text').show(2000, function(){
    console.log('显示完毕！');
  });
});

上面代码中，我们定义了一个按钮和一个文本段落。一开始，文本段落是隐藏的。当按钮被单击时，我们调用 show() 方法来显示文本。

其中，2000 表示动画执行时间是 2 秒，动画完成后会调用 function() 并输出 显示完毕！。

输出结果如下：

// 控制台输出
显示完毕！

注意事项

• show() 方法只会改变元素的 display 属性，不会改变元素的 visibility 属性。因此，使用该方法显示一个隐藏的 display: none; 的元素时，元素会变为 display: block;，而不是 display: inline-block 或其他。
• show() 方法只能用于被隐藏的元素，若元素已显示，则不会进行任何操作。
• 若 show() 方法注释掉或去掉，元素会立即变为可见状态，不会产生动画效果。
• 若使用了 box-sizing 属性的 border-box 值，则元素的 padding 和 border 的宽度也会被计入显示的高度和宽度，导致元素在显示时大小会变化。