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