jQuery UI 实例 - 显示（Show）

ゝ一纸荒年。 2024-03-23 10:45 88阅读 0赞

如需要了解更多有关`.show()`方法的细节，请查看API文档[.show()][.show]。

### .show() 显示 ###

点击按钮预览特效。

<span style="color:#333333"><!doctype html>
    <html lang="zh-cn">
    <头>
      <元字符集="utf-8">
      <title>jQuery UI 特效 - .show() 表演</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <样式>
      .toggler { 宽度：500px；高度：200px；}
      #button { 填充：.5em 1em; 文字修饰：无；}
      #effect { 宽度：240px；高度：135px；填充：0.4em；位置：相对；}
      #effect h3 { 保证金：0；填充：0.4em；文本对齐：居中；}
      </样式>
      <脚本>
      $(函数() {
        // 运行当前选择中的特性
        函数运行效果（）{
          // 从中获得特殊类型
          var selectedEffect = $( "#effectTypes" ).val();
     
          // 大多数的特效类默认不需要传递选项
          var options = {};
          // 一些特效带有必需的参数
          if ( selectedEffect === "scale" ) {
            options = { percent: 100 };
          } else if ( selectedEffect === "size" ) {
            options = { to: { width: 280, height: 185 } };
          }
     
          // 运行特效
          $( "#effect" ).show( selectedEffect, options, 500, callback );
        };
     
        // 回调函数
        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">显示（显示）</h3>
        <p>
          Etiam libero neque, luctus a, eleifend nec, semper at, lorem。种子脚。Nulla lorem metus，adipiscing ut，luctus sed，hendrerit vitae，mi。
        </p>
      </div>
    </div>
     
     <select name="effects" id="effectTypes">
      <option value="blind">百叶窗特效（盲效果）</option>
      <option value="bounce">反弹特效（Bounce Effect）</option>
      <option value="clip">剪辑特效（剪辑效果）</option>
      <option value="drop">降落特效（Drop Effect）</option>
      <option value="explode">爆炸特效（爆炸效果）</option>
      <option value="fold">折叠特效（折叠效果）</option>
      <option value="highlight">突出特效（Highlight Effect）</option>
      <option value="puff">膨胀特效（Puff Effect）</option>
      <option value="pulsate">跳动特效（Pulsate Effect）</option>
      <option value="scale">缩放特效（Scale Effect）</option>
      <option value="shake">震动特效（Shake Effect）</option>
      <option value="size">尺寸特效（Size Effect）</option>
      <option value="slide">滑动特效（Slide Effect）</option>
    </select>
     
    <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
     
     
    </body>
    </html></span>

[.show]: https://www.runoob.com/jqueryui/api-show.html