第三方滑倒动画后如何执行代码？

Question

Background: I am using the materialize JS to create collapsible divs. When a div that has a class of collapsible-header is clicked, a slide down animation occurs on the sibling div that has a class of collapsible-body, showing the contents of the collapsible-body.

What I am trying to accomplish is when a collapsible header is clicked, the browser should scroll to the top of that div so that the contents are in full view of the user. I have used an on click event, which works fine on the first collapsible. But then, if you have an open collapsible and you click on another to open it, it doesn't scroll to the top of the clicked div properly (it will scroll to the middle of the body, or way above the top of the div).

JS Fiddle of on click functionality: https://jsfiddle.net/f83dct8f/4/

I am able to accomplish what I am looking to do by editing the Materialize JS itself. Here is how the line looks before my edit:

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

I add the following to the complete portion of the above statement to accomplish what I'm looking for:

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

Question: I do not want to edit the Materialize 3rd party code to accomplish what I need, so I need to find a way to implement the body animate code after the slide down is finished, without editing the Materialize animation. I know there has to be a way to do it?

I have tried event queues on the collapsible body, which seemed promising, but my test console print executed during the animation. See below. If someone could point me in the right direction of what else I could try, I would greatly appreciate it.

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

console.log('DONE');

});

Answer 1

You should be able to use the onOpen option when initialising your .collapsible . Pass in a function to execute when the accordion is opened. The function receives the element as a argument.

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