如何在第三方幻灯片动画后执行代码？

Question

背景：--我正在使用物化 JS创建可折叠的div。当单击具有可折叠标头类的div时，具有类可折叠体的同级div上会出现幻灯片下移动画，显示可折叠体的内容。

我想要完成的是，当点击一个可折叠的标题时，浏览器应该滚动到该div的顶部，以便内容在用户的全部视图中。我使用了一个on事件，它可以在第一个可折叠的地方很好地工作。但是，如果您有一个可折叠的打开，然后单击另一个打开它，它就不会正确地滚动到单击的div的顶部(它将滚动到主体的中间，或者远远高于div的顶部)。

JS on单击功能：https://jsfiddle.net/f83dct8f/4/

我能够通过编辑物化JS本身来完成我想要做的事情。在我编辑之前，这一行是什么样子的：

​

object.siblings('.collapsible-body').stop(true, false).slideDown({
  duration: 350,
  easing: "easeOutQuart",
  queue: false,
  complete: function() {
    $(this).css('height', '');
  }
});

​

我将以下内容添加到上述语句的完整部分，以完成我想要的任务：

$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');

问题：我不想编辑物化的第三方代码来完成我所需要的，所以我需要找到一种方法来在幻灯片完成后实现身体动画，而不需要编辑物化动画。我知道一定有办法的？

我尝试过可折叠体上的事件队列，这似乎很有希望，但我的测试控制台打印在动画期间执行。见下文。如果有人能为我指明正确的方向，我会非常感激的。

$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){    

console.log('DONE');

});

Answer 1

您应该能够在初始化您的onOpen时使用.collapsible选项。传入一个函数，以便在打开手风琴时执行。函数接收元素作为参数。

$(document).ready(function() {
    $('.collapsible').collapsible({
        onOpen: function(el) {
            $('body').animate({scrollTop: el.offset().top },'slow');
        }
    });
});