jQuery Easing Plugin Not Easing?

Question

I have no idea why this isnt working for me. Maybe one of the jQuery Guru's out there can help me make this work!

From the script below you can see that i have a UL block named five that i would like to ease to there anchor(#web). When i click the menu item i do get the alert to activate so i think that part is correct.

$(function() {
$('ul.five a').bind('click',function(event){
    var $anchor = $(this);
    alert('hellooo')
    $('html, body, section').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');

    event.preventDefault();
});

});

This is what one of my sections looks like in case this would help?

<section class="row divider-down" id="section1">
<header>
    <h1><img src="image/image1.png" alt="Alt"></h1>
    <p>some text</p>
</header>

Does anyone see anything that is obviously wrong here? Like i said the alert pops up but it doesnt "ease" down to the section?

Answer 1

I think you were close. Two things:

1. Change what you are animating to $('body')
2. You can't use 'easeInOutExpo' unless you have jQuery UI included (see EDIT below).

Try this:

$(function() {
    $('ul.five a').bind('click',function(event){
        var $anchor = $(this);
        var $section = $($anchor.attr('href')); 
        if (!$section.length) { return; } // bail if there is no section

        $('body').stop().animate({ // only scroll the body
            scrollTop: $section.offset().top
        }, 500); // must remove 'easeInOutExpo' or include jQuery UI

        event.preventDefault();
    });
});

EDIT: FROM THE JQUERY DOCS:

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

So, you can't use 'easeInOutExpo' unless you have jQuery UI added on the page.