jQuery animation triggers callback twice when run

Question

I'm animating a scroll to effect using jQuery, after the animation ends, I trigger an effect, for some reason the effect is triggered twice, how can I prevent it from happening?

$('.something').on('click', function() {
            $('html, body').animate({
                scrollTop: $('footer').offset().top
            }, {
                queue: false,
                duration: 1500,
                complete: function() {
                    $('.foo').toggleClass('active');
                    $('.bar').slideToggle();    
                }
            });                
            return false;
        });

The slideToggle effect seems to be triggered twice. I have it animate on html & body because animate from 'body' doesn't work in IE8.

Answer 1

Since you're triggering two animations (on html and body) the complete callback should be called twice.

You might want to on trigger the animation on html only if it's required

var animateOn = isIE8 ? 'html' : 'body';
$(animateOn).animate();