jQuery选项卡回调在"；“显示”；动画

我有一个指向jQueryUI选项卡的链接，该选项卡需要显示该选项卡，然后将其滚动到视图中。我的第一反应是使用basic

$（'selector'）.tabs（'option'，'active'，1）

来显示它，然后将回调绑定到tabsactivate事件，以将body元素的滚动顶部设置为tabs容器的偏移量。应该很简单，对吗？但是当我点击链接时，除非标签已经激活，否则页面不会滚动

在仔细研究之后，我发现了问题：选项卡上的动画有150毫秒的淡入，而tabsactivate在动画完成之前就启动了。因此，当我试图获取其偏移量时，它是0，因为该选项卡实际上尚未显示。我很确定这就是原因，因为如果我删除显示/隐藏动画，它会按预期工作

简而言之，我的问题是，是否可以将回调绑定到内置选项卡“show”动画，以便在动画完成之前不会触发

如果不是，什么是好的解决方法

编辑：问题可能不是我想的那样。。。张贴代码如下

代码（非常凌乱且未进行优化）

$（函数（）{
$（'.select tab'）。单击（函数（e）{
var$target=$（“#”+this.href.split（“#”）[1]），
tabindex=$target.index（“.ui选项卡面板”），
$tabParent=$target.parents（'.ui-tabs-container'）；
$tabParent.tabs（'option'，'active'，tabindex）；
e、 预防默认值（）；
});
$（“.scroll”）.each（函数（）{
变量$this=$（this），
$target=$（“#”+this.href.split（“#”）[1]），
$tabParent=$target.parents（'.ui-tabs-container'），
clickHandler；
函数clickHandler（）{
$（'html，body'）.animate（{“scrollTop”：$target.offset（）.top}，500，'easeOutCubic'）；
}
if（$this.hasClass（'select-tab'）&&$target.hasClass（'ui-tabs-panel'））{
$this。单击（函数（e）{
if（$target.index（'.ui选项卡面板'）==$tabParent.tabs（'option'，'active'））{
clickHandler（）；
}否则{
$（文档）.one（'tabsactivate'，$tabParent，函数（e，ui）{
clickHandler（）；
});
}
});
}否则{
$this.click（clickHandler）；
}
});
});

---

jQuery UI选项卡有一个方法，该方法称为

激活

，在动画完成后触发

---

小提琴：

嗯，根据文件，的确如此。我一直在尝试使用activate，但出于某种原因，它仍然认为新激活选项卡的顶部偏移量为0。我想那是因为它还没有上映，但也许还有另一个原因。。。我们必须调查。谢谢你的回答！调用

activate

时，是否使用

ui.newPanel

参数访问新显示的面板？你能发布你的javascript吗？这样我们就可以知道你已经尝试了什么？检查我的小提琴，它可能会给你一些想法。继续并接受了这个答案，因为它告诉了我我需要知道的，问题其实不是动画。现在我认为这与在同一个链接上有两个不同的事件处理程序有关。但这是一个完全不同的问题。谢谢你花时间帮忙！

<script>
$(function() {

$('.select-tab').click(function(e){
    var $target = $('#'+this.href.split("#")[1]),
        tabindex = $target.index('.ui-tabs-panel'),
        $tabParent = $target.parents('.ui-tabs-container');
    $tabParent.tabs('option','active',tabindex);
    e.preventDefault();
});

$(".scroll").each(function(){
    var $this = $(this),
        $target = $('#'+this.href.split("#")[1]),
        $tabParent = $target.parents('.ui-tabs-container'),
        clickHandler;

    function clickHandler(){
        $('html,body').animate({"scrollTop":$target.offset().top},500,'easeOutCubic');
    }

    if( $this.hasClass('select-tab') && $target.hasClass('ui-tabs-panel') ){
        $this.click(function(e){
            if( $target.index('.ui-tabs-panel') == $tabParent.tabs('option','active') ){
                clickHandler();
            } else{
                $(document).one('tabsactivate',$tabParent,function(e,ui){
                    clickHandler();
                });
            }
        });
    } else{
        $this.click(clickHandler);
    }
});

});
</script>

<a class="select-tab scroll" href="#ProductReviews">
    Read all 36 Reviews
</a>

<div class="ui-tabs-container ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="product_tabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
        <a href="#RelatedProducts">Related Products</a>
    </li>
    <li class="ui-state-default ui-corner-top">
        <a href="#ProductReviews">Product Reviews</a>
    </li>
    <li class="ui-state-default ui-corner-top">
        <a href="#OrderWithConfidence">Order With Confidence</a>
    </li> 
</ul>
<div id="RelatedProducts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <!-- Stuff Here -->
</div>
<div id="ProductReviews" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
    <!-- Stuff Here -->
</div>
<div id="OrderWithConfidence" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
    <!-- Stuff Here -->
</div>