jquery ui 选项卡上滑效果答案

【问题标题】：jquery ui tabs slide up effectjquery ui 选项卡上滑效果
【发布时间】：2016-05-13 06:12:19
【问题描述】：

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs slideup

【解决方案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>

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/

【讨论】：