CODEWITHSUNDEEP
javascriptjquery
yeyo
yeyo

Reputation: 3009

How to animate right/left hiding and showing divs with jQuery?

So far my application is working when I click an event, the div moves to the left and the next div appears, so far so good. The first transition is working, but when I want to go back it doesn't work.

function animate_question(current_question, next_question, direction) {
    if (direction == "left") {
        $(current_question).animate({
            left: "-=100",
            opacity: "0"
        }, {
            "complete": function () {
                $(current_question).remove();
                $(next_question).delay(200).fadeIn();
            }
        });
    } else if (direction == "right") {
        $(current_question).animate({
            left: "+=100",
            opacity: "0"
        }, {
            "complete": function () {
                $(current_question).remove();
                $(next_question).delay(200).fadeIn();
            }
        });
    }
}

EDIT

Context

$("#next2").click(function() {
    var a = check_radio("Q1");
    if(a) {
        animate_question(".question1", ".question2", "left");
    } else {
        alertify.alert(message);
    }
});


$("#back1").click(function() {
    animate_question(".question2", ".question1", "right");
});

Upvotes: 0

Views: 69

Answers (1)

helion3
helion3

Reputation: 37511

remove actually removes the element from the DOM. If you try again, there'd be no element to animate.

Upvotes: 2

Related Questions