CODEWITHSUNDEEP
javascriptjquery
James Myers
James Myers

Reputation: 305

Jquery animate - callback executing before animation is complete

What I'd like to accomplish is for the element to expand in height, and then apply a background image once the height change is complete. I've noticed that the background image in the callback applies before the height animation is complete resulting in laggy performance. Can anyone tell me why this is?

$(document).ready(function() {
    $('#hero').animate({
        height: ($(window).height() - $("#hero").offset().top - 50) 
    }, 100, function() {
        $('#hero').css('background-image', 'url(./img/hero.jpg)');
    });
});

Upvotes: 1

Views: 1130

Answers (1)

Robert McKee
Robert McKee

Reputation: 21487

You have a transition: all 1s ease on #hero, which will cause the animation to play erratically since you are trying to use css3 animations to animate the jQuery animation (and throw all kinds of timing problems).

What I suspect is happening is that you are getting notified that the jQuery animation completed, but the css3 animation doesn't complete for an additional 1s, which is why you are seeing what you are.

Upvotes: 3

Related Questions