jquery ui 选项卡上滑效果

Posted 2023-05-08

【中文标题】jquery ui 选项卡上滑效果

【英文标题】：jquery ui tabs slide up effect

【发布时间】：2016-05-13 06:12:19

【问题描述】：

我设置了 jquery ui 选项卡，但我想添加一个上滑和下滑动画。目前，当您单击按钮时，它只会打开和关闭。如何将幻灯片效果添加到我现有的 jquery 代码中？

jQuery(document).ready(function ($) 
    $(".tabs").tabs(
        collapsible: true,
        active: 'none'
    );
    return false;
);

【参考方案1】：

下面是代码

html

<div class="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 3</p>
  </div>
</div>
<div id="tabid"></div>

JS

jQuery(document).ready(function($) 

  $.effects.effect.heightFade = function(o, done) 
    var el = $(this),
      mode = $.effects.setMode(el, o.mode || "show");
    el.animate(
      height: mode,
      opacity: mode
    , 
      queue: false,
      complete: done
    );
  ;

  $(".tabs").tabs(
    collapsible: true,
    active: 'none',
    hide: "heightFade",
    show: "heightFade",
  );
  return false;
);

演示：https://jsfiddle.net/gpeczyff/1/