How to use .toggle () to swap animations

Question

How to use .toggle () to swap animations

Navigation

#1 by (4 votes)

3

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!

javascript jquery

asked by anonymous 14.02.2016 / 22:01

1 answer

How to make multiple checkbox records in the database at once? Sum of several text files * .txt

score 4 · Accepted Answer

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