Question

$('.link').click(function(){
    $paneTarget.stop().scrollTo('#due', 800, { margin: true } ).toggleClass('selected'),
    $("body").delay(1000).animate({backgroundColor: "#1c6e7a"},800);   

});

The delay function doesn’t work in the example. If I remove the .delay value the code works, but I need the background to change AFTER the other function has completed. Any suggestions?

Answer 1

I am assuming this is the .scrollTo() plugin. The plugin allows for a call back after the animation completes.

onAfter: A function to be called after
the whole animation ended.

$('.link').click(function () {
    $paneTarget.stop().scrollTo('#due', 800, {
        margin: true,
        onAfter: function () {
            $("body").animate({
                backgroundColor: "#1c6e7a"
            }, 800);
        }
    }).toggleClass('selected');
});

Example on jsfiddle