Return div to initial position after animation?

Question

How can I return mine div to the starting position if it reaches a certain point on the left? I have the following current code:

$(document).ready(function() {   
    $("#botao").click(function() {      
        $(".maior").animate({left:"-=400px"},1000)
    });
});

CSS:

.maior {
    width: 1614px;
    height: 433px;
    float: right;
    position: absolute;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #FFF;
    font-weight: bolder;
    overflow: hidden;
    left: 9px;
    top: -4px;
}

Answer 1

The jQuery property .animate() does nothing more than create an attribute style in its HTML element and change its value gradually. So, if you remove this attribute after animation, the element returns to its initial location.

You could do the following:

$(document).ready(function() {   
    $("#botao").click(function() {        
          $(".maior").animate({left:"-=400px"},1000,function(){
              $(this).removeAttr('style');
          });
    });
});

What I did above was to add a callback that fires every time the animation ends, and inside that callback I simply remove the attribute style of the element that was animated.

Example: FIDDLE

Answer 2

You can use the .stop(), this method has 2 parameters. The first is to clear the list of animations on hold, the second is to go to the final position. In your case you want to .stop(true, false);

You can use the complete function to check the final position, but you can also check at the beginning of the click (using the .stop()) and so do not run the Animate, or change its value to its left maximum.

Suggestion (with many variables to be clearer:

$(document).ready(function () {
    $("#botao").click(function () {
        var maior = $(".maior");
        var limite = 200; // o seu valor limite aqui
        var posicao Atual = maior.position().left;
        var deslocamento = 400; // o deslocamento padrão
        if (posicao <= limite){ // caso esteja já no limite
            maior.stop(true, false);
            return;
        };
        // na linha de baixo verifica se o deslocamento padrão faz com que 
        // vá demasiado à esquerda, e nesse caso compensa o deslocamento
        if (posicao - 400 < limite) deslocamento = limite - posicao;
        maior.animate({
            left: "-=" + deslocamento + "px"
        }, 1000)
    });
});