Move div back to original position when closing drop down menu

Question

First off I'd like to state that I've done my research but still can't find a solution.
My goal is to have the ball move to the left on click and then back to it's original position once the viewer clicks the ball again in order to close it.

I am using these lines to animate the menu and ball
(with help from a fellow stackoverflow member)

jQuery(document).ready(function() {
jQuery(".RXMENU").hide();

jQuery(".RXCLICK").click(function() {
$(".ACTIVE").removeClass("ACTIVE");
$(this).addClass("ACTIVE");
     jQuery(this).next(".RXMENU").slideToggle(500);
        jQuery( ".RXCLICK" ).animate({
        right: "56"
    });  

}); 

});

I tried using this code to move the ball back//

jQuery(".RXMENU").hide();
jQuery(".RXCLICK").click(function() {
        jQuery( ".RXCLICK" ).animate({
        right: "-56"
    });  
});

I figured using a negative for the position would make difference, but I was clearly wrong. Changing "hide" to "show" has the same result, after I click the ball to close the menu the ball jiggles a tad, but it doesn't move back where I would like it to be.

Here is an updated fiddle .

My question is: How can I get the code to work? What functions are needed in order to animate the ball back to it's original position?

All help appreciated!

Answer 1

You were running twice the click function for the same object, which resulted in -56px +56px = 0px = the object remains in place.

Basically, you have just to note when a ball is not moved, and move it then, or if already moved - then move it back. Right? Adding a class 'active' to a moved ball could be a solution, yes. In terms of simplicity I'm using the '$' for 'jQuery' identifier. And here is something which works (just copy-paste it in your JSFIDDLE example):

(function(){

    $(".RXMENU").hide();
    $(".RXCLICK").click(function() {
        if ( $(this).hasClass('ACTIVE') ){
            $(".RXMENU").slideToggle(500);
            $(this).animate({right: "-=56px"},'slow').removeClass('ACTIVE');
        } else {
            $(".ACTIVE").removeClass("ACTIVE");
            $(this).next(".RXMENU").slideToggle(500);
            $(this).addClass("ACTIVE").animate({right: "+=56px"},'slow');
        }
    });

})();

Answer 2

You had 2 events attached to the click event. Just one is enough:

jQuery(document).ready(function () {
    var moved = false;

    jQuery(".RXMENU").hide();
    jQuery(".RXCLICK").click(function () {
        $(".ACTIVE").removeClass("ACTIVE");
        $(this).addClass("ACTIVE");
        jQuery(this).next(".RXMENU").slideToggle(500);

        jQuery(".RXCLICK").animate({
            right: moved ? "0" : "56" // move right by 56 pixels relative to original position
        });
        moved = !moved; // toggle state
    });
});