Search code examples
jquerycallbackjquery-callback

fadeToggle jQuery callback before, not after

Is there a way to assign a callback before the fade animation occurs in fadeToggle? I am adjusting scroll positions and would like to adjust it before the object appears, not after.

Solution

  • All you need to do is call your function, or run any code, directly after fadeToggle:

    element.fadeToggle('fast');
element.scrollTop(300);

    This will immediately set the scroll position, and the fade affect will follow.

    Here is what I specifically had: visible and hidden are elements I just named as vars.

    visible.fadeToggle('fast', function() {
    hidden.fadeToggle('fast');
    hidden.scrollTop(top_value);
});

    When visible is hidden, the callback is invoked and the hidden element becomes visible. The scroll position is set immediately after, so you see the change before the fade has completed. This way you have a fluid fade and keep the scroll positions of both elements the same.