jQuery-在CSS转换完成后运行函数

Question

我有一个带有CSS动画的手风琴，可以扩展单击的li。这是使用li:target完成的。

现在，我想滚动到被点击的id，但由于css转换，它最终被定位在激活转换之前li所在的位置。

这是我目前的javascript片段：

$(document).on('click', '#accordion li', function (e){
    e.preventDefault(); 
      // Call the scroll function
    goToByScroll($(this).attr("id"));
    $('#accordion li').height('');
    $(this).height($('section', $(this)).outerHeight() + $('a', $(this)).outerHeight());
});
// This is a functions that scrolls to #ID
function goToByScroll(id){
    // Scroll
    // Wait until CSS transition is done
    $("#"+id).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'fast');
        $("#"+id).unbind();
    });  
}   

第2版：在Piotr的建议下，解除事件绑定修复了我的错误行为：）

Answer 1

您可以尝试：

$("#"+id).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){ 
    $('html,body').animate({
    scrollTop: $("#"+id).offset().top},
    'fast'
    );
    $(this).unbind(event);
});

编辑：添加了解除绑定指令。

Answer 2

很难知道转换何时结束。你可以用1000ms，例如

window.setTimeout(function () {
   // your scrolling
}, 1000);