How to use .toggle () to swap animations

I am trying to toggle the animation of a div using .toggle() , but this div , which is the first gray ball, simply disappears after I click the button (orange ball), instead of returning to its position initial.

function main() {
    $('.mainBtn').click(function(){
        console.log("bolaxa");
        $('#btn1').toggle(
            function () {
                $(this).animate({left:'250px'}, 300);
            },
            function () {
                $(this).animate({right:'250px'}, 300);
            }

        );
    });
}

$(document).ready(main);

Here’s the JSFiddle: link .
How can I get the ball back to its starting place?

Thank you!

This happens because you are adding 250px positive to the second .animate() which makes the animation alternation while you should make the animation back to left:'0' instead, which is its starting place, not 250px positive.

$('.mainBtn').click(function(){
    $('#btn1').toggle(function () {
            $(this).animate({left:'250px'}, 300);
        },
        function () {
            $(this).animate({left:'0'}, 300); // Aqui volta para o Zero, lugar inicial
        }
    );
});

Here’s an example online: link