使用slideUp和slideDown切换jQueryUI选项卡

Question

我使用jQueryUI作为我的js库。

HTML

<ul>

        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1" style="height:1000px;">    </div>
    <div id="fragment-2" style="height:800px;"></div>
    <div id="fragment-3" style="height:1200px;"></div>

Jquery

  <script>
  $(document).ready(function() {
    $("#container").tabs(
    {
        fx: {opacity: 'toggle' }
    }
    );
  });
  </script>

因为我的标签(Div)具有不同的高度，所以我想在切换标签时添加slideUp和slideDown效果。因此，不同的高度不会显示太多。

Tab1(1000px) -> Tab12(800px) -> Tab3(1200px)

高度应该像上面那样变化。我不想slideUp或SlideDown整个div(选项卡)。Tab1(1000px) -> Tab1(800px)。从Tab1切换到Tab2时，200px应为slideUP。从Tab2切换到Tab3时，400px应为slideDown。

我该怎么做呢？

谢谢

Answer 1

我还没有机会对此进行适当的测试，但您应该能够从中获得一个想法。将div设置为全局变量，然后在页面加载时将currentHeight变量设置为默认或当前可见的div的高度。

单击任何锚标记，运行一个函数来获取所单击的div的高度，然后使用currentHeight变量来检查差异。然后从新div的高度减去这个差值，然后动画到这个新高度。在此示例中，重要的是在设置动画(更改其高度)之前，将currentHeight全局变量设置为新的div高度，否则下次单击选项卡时，计算将不起作用。

var currentHeight = 0;

$(document).ready(function(){
  currentHeight = $('#fragment-1').height(); 
});

$(document).ready(function(){
  $('a[href*="#fragment"]').click(function(){

       var divID = $(this).attr('href');
       var heightDiff = $(divID).height() - currentHeight;
       var newHeight = $(divID).height() - heightDiff;
       currentHeight = $(divID).height();
       $(divID).animate( { height:newHeight } );
  });
});

Answer 2

当dom准备就绪时，你可以缓存所有标签的高度，创建一个叫做' currentHeight‘的全局变量(如果你一开始没有显示任何标签，默认是0，否则它应该是初始标签的高度)，然后在锚标签的点击事件中，你可以抓取适当标签的高度，减去currentHeight。如果结果是肯定的，slideDown就会不同。如果它是负数，则slideUp为结果的绝对值。当然，您必须更新currentHeight变量。