jquery animate not working with easing other than linear

Question

i have written jquery to animate one div and it works fine if i don't mention any easing effect, or if i mention 'linear' but i want 'easeInOutBack' easing effect here and can't understand what is going wrong.

Hope someone tells me where i am missing out something.

Please give solutions in a simple language if possible because i am new to jQuery. :) :|

$(document).ready(function (e) {
    $('div.button').on('click', function () {
        $('div.box').animate({
            marginLeft: 200
        }, {
            duration: 2000,
            easing: 'easeOutBack'
        });
    });
});  

Is not working for me.

Answer 1

You need to include jquery UI for that

From docs:

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.

• http://api.jquery.com/animate/
• http://code.jquery.com/ui/1.10.3/jquery-ui.js

Answer 2

Make sure you have jQueryUI included.

Check out this fiddle, it works fine with easeInOutBack when jQueryUI is included.

http://jsfiddle.net/AHnDb/