Javascript jQueryUI选项卡使用slideUp和slideDown切换

我正在使用jQueryUI作为我的js库。
HTML

Jquery

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

$（文档）.ready（函数（）{
$（“#容器”）.tabs(
{
fx:{opacity:'toggle'}
}
);
});

由于我的选项卡（div）具有不同的高度，我想在切换选项卡时添加slideUp和slideDown效果。因此，高度差异不会显示太多

Tab1（1000px）->Tab12（800px）->Tab3（1200px）

高度应如上所述。我不想滑动或滑下整个分区（选项卡）。Tab1（1000px）->Tab1（800px）。从Tab1切换到Tab2时，200px应为slideUP。从Tab2切换到Tab3时，400px应向下滑动

我怎么做

---

感谢

当dom就绪时，您可以缓存所有选项卡的高度，创建一个名为“currentHeight”的全局变量（如果最初没有显示任何选项卡，则默认值为0，否则应为初始选项卡的高度），然后在锚定标记的单击事件中，您可以获取相应选项卡的高度，减去当前高度。如果结果为正，则向下滑动到该不同的位置。如果为负数，则滑动到结果的绝对值。当然，您必须更新currentHeight变量。

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

单击任何锚定标记都会运行一个函数来获取单击的div的高度，然后使用currentHeight变量检查差异。然后从新div的高度中减去此差值，并将动画设置为此新高度。在本例中，在设置动画（更改其高度）之前，将currentHeight全局变量设置为新的div height非常重要，否则下次单击选项卡时，计算将无法进行

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 } );
  });
});

---

你知道最小的div高度将是800px吗？或者你每次都需要动态地计算它吗？对不起，我误解了你想上下滑动。这是你仅有的3个标签还是有很多。你如何决定你是想向上滑动还是向下滑动？i、 e您想让选项卡1在单击时向上滑动至800px，但您想让选项卡2在单击时向下滑动至1200px？是的，这正是我想要的。下面的答案是否有帮助？

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 } );
  });
});