Easing options in jQuery is not working

Question

I have tried using easing so many times for education purposes but in vain my trials never succeeded surely I did something wrong but for two days now I could not identify the mistake, so I include here my jQuery function and hoping you will tell me where is the problem.

The result of the attached code is just hiding instead of animating

$(document).ready(function()
{
    $('#hide').click(
        function()
        {
            $('p').toggle(
            function()
            {
                $('p').animate({'padding':'=+150px'},3000,'swing')
            },
            function()
            {
                $('p').animate({'padding':'=-150px'},3000,'linear')
            }
            );
        }
    )
})

This form of toggle is deprecated in the latest version of jquery — Kevin Bowersox, Mar 20 '13 at 08:47
can you show the html code you want to associate to your animating process — klewis, Mar 20 '13 at 08:55
@MohamedSamir See my answer for a toggle substitute. It appears no simple jquery method has replaced the function `toggle` with form `toggle(func,func)` — Kevin Bowersox, Mar 20 '13 at 09:08

score 0 · Accepted Answer · answered Mar 20 '13 at 09:05

I removed the call to the deprecated form of toggle replacing it with a simple boolean. Also note that padding should be set like -=150px instead of =-150px.

var toggle = true;
$(document).ready(function()
{
    $('#hide').click(
        function()
        {
            if(toggle){
                $('p').animate({'padding':'+=150px'},3000,'swing');
                toggle = false;
            }else{
                $('p').animate({'padding':'-=150px'},3000,'linear');
                toggle = true;
            }
        }
    )
});

Working Example: http://jsfiddle.net/nBzCL/

Easing options in jQuery is not working

1 Answers1