Why doesn't it fire the alert?

var $anchor = $(this);

$('.hide').val($(this).attr('href'));
$('html, body').animate({
    scrollLeft: $($anchor.attr('href')).offset().left
}, {
    queue: false,
    duration: 1000,
    easing: 'easeInOutCirc'
}, function () {
    alert('test');
});

Why doesn't it fire the alert?

var $anchor = $(this);

$('.hide').val($(this).attr('href'));
$('html, body').animate({
    scrollLeft: $($anchor.attr('href')).offset().left
}, {
    queue: false,
    duration: 1000,
    easing: 'easeInOutCirc'
}, function () {
    alert('test');
});

• javascript
• jquery
• animation
• callback

2 Answers 2

There are multiple different syntax options you can use with .animate(). When you pass a properties object and an options object (like you are doing), the pletion function goes in the options object not as the third parameter like this:

var $anchor = $(this);

$('.hide').val($(this).attr('href'));
$('html, body').animate({
    scrollLeft: $($anchor.attr('href')).offset().left
  }, {
    queue: false,
    duration: 1000,
    easing: 'easeInOutCirc',
    plete: function () {
        alert('test');
    }
  }
);

This is described in full in the jQuery .animate() doc.

.animate( properties, options )

properties - A map of CSS properties that the animation will move toward.

options - A map of additional options to pass to the method. Supported keys:
    duration: A string or number determining how long the animation will run.
    easing: A string indicating which easing function to use for the transition.
    plete: A function to call once the animation is plete.
    step: A function to be called after each step of the animation.
    queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
    specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

try to specify the third parameter as "plete" like so:

var $anchor = $(this);

$('.hide').val($(this).attr('href'));
$('html, body').animate({
    scrollLeft: $($anchor.attr('href')).offset().left
}, {
    queue: false,
    duration: 1000,
    easing: 'easeInOutCirc'
}, plete: function () {
    alert('test');
});