jquery选项卡幻灯片效果

Question

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

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

Answer 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/