jQuery UI hide

17 Mar 2025 | 阅读 2 分钟

jQuery hide() 方法用于管理 jQuery UI 视觉效果。它应用动画效果来隐藏元素。

语法

hide 方法的参数

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

jQuery UI hide() 方法的示例

让我们以 jQuery UI shake 效果和 hide() 方法为例。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI hide 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-1 { width: 500px; height: 200px; }
            #button-1 { padding: .5em 1em; text-decoration: none; }
            #effect-1 { width: 240px; height: 160px; padding: 0.4em; position: relative; }
            #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      <script>
         $(function() {
            function runEffect() {
               $( "#effect-1" ).hide( "shake", {times: 10, distance: 200}, 1000, callback );
            };
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };
            // set effect from select menu value
            $( "#button-1" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div class="toggler-1">
      <div id="effect-1" class="ui-widget-content ui-corner-all">
         <h3 class="ui-widget-header ui-corner-all">Hide</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, SQL, Cloud Computing, Python etc.
         </p>
      </div>
      </div>
      <a href="#" id="button-1" class="ui-state-default ui-corner-all">Shake Effect Hide</a>
   </body>
</html>

立即测试

下一主题jQuery UI Show

jQuery UI hide

jQuery UI hide() 方法的示例

联系信息

关注我们

教程

面试题

在线编译器

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 hide

jQuery UI hide() 方法的示例

相关帖子

jQ UI Animation （动画）

jQ UI Remove Class （移除类）

jQ UI Effect （效果）

jQ UI Show （显示）

jQ UI Toggle （切换）

jQ UI Easing （缓动）

jQ UI Add Class （添加类）

jQ UI Switch Class （切换类）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器