Question

I created a simple ‘slide’ animation that works fine the first time it’s played, but doesn’t achieve the same effect the second or successive times (it’s supposed to look like the divs are pushing each other, but once it’s gone forward and back the second forward animation is lost).

I realise it’s probably because of the ‘left’ position I’m giving it in the second line. The first time the animation loads, the div has no left value, and once it’s played the value is 0. But this is where I hit a wall because I don’t know how to solve it. Maybe killing the script? This is as far as my knowledge goes, I have no idea if there’s something like “clean all the values given by the script”. I hope this makes sense…

Here’s the jsFiddle, and this is my code:

$('a.settingsTitle.settingsTitleTask').click(function () {
    $("#settingsPortal").animate({'left': '0px','width': '0%'}, 300, function() {
        $(this).addClass('displayNone');
        $("#settingsTask").removeClass('displayNone').animate({'left': '0px','width': '100%'}, 300);
    });
});


$('a.settingsTitle.settingsTitleBack').click(function () {
    $("#settingsTask").animate({'left': '610px','width': '0%'}, 300, function() {
        $(this).addClass('displayNone');
        $("#settingsPortal").removeClass('displayNone').animate({'left': '0px','width': '100%'}, 300);
    });         
});

Answer 1

In JavaScript CSS styles are applied in the style attribute, so to revert to the original state just do this:

$element.removeAttr('style')