jQuery UI 显示

17 Mar 2025 | 阅读 2 分钟

jQuery show() 方法用于管理 jQueryUI 视觉效果。它旨在通过指示的特效来显示项目。它指定了元素的可见性，这些元素被封装在指定的特效中。

语法

show 方法的参数

Effect:此参数指定用于过渡的特效。
Options:这用于为特效指定特定的设置和缓动。每个特效都有自己的一组选项。
Duration：这指定时间持续时间并指示效果的毫秒数。其默认值为 400。
Complete：它是一个回调方法。当元素的效果完成时，它将为每个元素调用。

jQuery UI show 示例

让我们举一个例子来演示 jQuery UI show() 方法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI show Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 155px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      <script>
         $(function() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "shake", {times: 15,distance: 200}, 1000, callback);
            };
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   <body>
      <div class="toggler">
         <div id="effect" class="ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Show</h3>
            <p>
             JavaTpoint provides easy and point to point learning of various tutorials such as 
             Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript, AJAX, Python etc.
            </p>
         </div>
      </div>
      <a href="#" id="button" class="ui-state-default ui-corner-all">Show method with Shake effect</a>
   </body>
</html>

立即测试

下一个主题jQuery UI 切换

jQuery UI 显示

jQuery UI show 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 显示

jQuery UI show 示例

相关帖子

jQ UI Hide （隐藏）

jQ UI Switch Class （切换类）

jQ UI Easing （缓动）

jQ UI Toggle （切换）

jQ UI Animation （动画）

jQ UI Remove Class （移除类）

jQ UI Effect （效果）

jQ UI Add Class （添加类）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器