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')
            }
            );
        }
    )
})
Was it helpful?

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top