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

Edit2：在Piotr的建议之后，取消绑定事件修复了我遇到的错误行为：）

Answer 1

您可以尝试：

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

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

Answer 2

很难知道过渡何时结束。你可以假设1000毫秒，例如。

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

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

2 个答案: