3

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.

tushar.dahiwale
  • 146
  • 2
  • 13

2 Answers2

6

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.

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
  • 1
    its my first post and wow.. thanks for such a quick response... can u please tell me where can i get the UI? – tushar.dahiwale May 28 '13 at 08:58
  • @india_developer _its my first post_ - Please don't forget to accept the answer by clicking the tick next to the answer. – Alex May 28 '13 at 09:01
  • sorry for my question again - there are number of files in that archive.. which one is to included for the effect that i want? and is the method of including it similar to including jquery library (jquery1.9.1.min.js) ? – tushar.dahiwale May 28 '13 at 09:08
  • include this file `-->` http://code.jquery.com/ui/1.10.3/jquery-ui.js same as you include jquery...and make sure you include after jquery – Adil Shaikh May 28 '13 at 09:12
1

Make sure you have jQueryUI included.

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

http://jsfiddle.net/AHnDb/

Alex
  • 8,875
  • 2
  • 27
  • 44