jqueryjquery-easing

Easing options in jQuery is not working


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')
            }
            );
        }
    )
})

Solution

  • 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/