Callback for jquery plugin Isotope

Question

I'm using isotope ( http://isotope.metafizzy.co ) with expandable items, and i would like to use ScrollTo so that i can automatically scroll to the newly expanded item..

I first tried to use the callback with the reLayout method, something like:

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin being a variable where i put "this" from the click handler.
Unfortunately, i always get the old position of the object..

Actually i'm not sure if the callback is called too soon or if i'm unable to understand how storing my jQuery object makes it more like a copy or a "pointer" ;-)

Any thought ?

EDIT : i am now sure that the callback is called before the end of the animation, so my question would be : how can i now the animation has finished ?

Answer 1

allright,

sneaking in the isotope code, i found that the animation options are passed directly to the animate jquery method, so i added the complete callback to these options:

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}

then i was able to filter my expanded object and scroll to it :

            function iwannascroll(){
                var target = $(this);
                if (target.hasClass('expanded'))
                    $.scrollTo(target, 800);                
            }

obviously it will work only if you use the jQuery animate method for the animation.. If anyone knows a better and "universal" way, i would love to hear it ;)

Answer 2

The callback for the Isotope reLayout fires too soon indeed.

I used bind to detect when the animation ended.

It works works for both the jquery and css animation engine.

$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){

});

ps: this has to be placed after the regular isotope code of course.

Greetings, Manuel