Search code examples
jquerycallbackchaining

JQuery: Chaining vs Callback Functions

Below is the code snippet of JQuery code for Chaining vs Callback Function:-

$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

vs

$(selector).animate({ opacity: 1}, function()
{
    $(this).animate({ opacity: 0.5 });
});

In what type(s) of situation would one want to prefer one over the other?

Solution

  • They are effectively the same, so you'd probably just use the first.

    Callbacks (the second version) are for running any arbitrary code that isn't automatically queued.

    This includes other jQuery methods like .css() for example, which if not in the callback, will run long before the animation is complete.

    // .animate() is automatically queued
$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

    // .css() is not automatically queued, so you'd need a callback
$(selector).animate({ opacity: 1 }, function() {
    $(this).css({ opacity: 0.5 });
});

    Without the callback...

     // Animation starts ----v
$(selector).animate({ opacity: 1 }).css({ opacity: 0.5 });
 // ...but .css() runs immediately-------------^
 // ...because it isn't automatically added to the queue.