jQuery to slide a div right to left slides the div out of window

Question

I have created a slider that slides from right to left. I am changing margin-right to make the slide work.

As per the requirement, I have a treeview, when user clicks on any node, it opens a sliding dialog with some controls in it. When user clicks on any node, it should first close the previously open dialog and then open the dialog for currently selected node. I am able to make this work when user clicks on the node, the dialog opens, and when user click back again on the same node or the slider-button, the dialog hides. But somehow, the code to hide when user click on any other node doesn't work properly. It moves the slider-button and the dialog away and I don't see anything.

I used the following code:

if($('#slider-button').css("margin-right") == "400px") {
    $(sliderDialog).animate({"margin-right": '-=400'});
    $('#slider-button').animate({"margin-right": '-=400'});
} else{
    $(sliderDialog).animate({"margin-right": '+=400'});
    $('#slider-button').animate({"margin-right": '+=400'});
}

I thought, it as simple as finding if the previously selected dialog is different than current than just call the same code that hides the dialog when user clicks on the same node again. ie.

$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});

But, it behaves weird. Anyone, what am I missing here?

Here is my jsFiddle .

Answer 1

Using the DOM and such that you had, I've updated the JS to switch between them after animating back (here is the Fiddle in action):

var sliderDialog = "#dvPriorityDialog"

function slideIt() {
    var sliderId = '#' + $('.pollSlider.open').attr('id');
    var slideWidth;
    if ($('.pollSlider').hasClass('open')) {
        slideWidth = $('.pollSlider.open').width();
        $('.pollSlider.open').animate({"margin-right": '-=' + slideWidth}, function() {
           if (sliderId != sliderDialog) {
                slideIt();
           }
        });
        $('#slider-button').animate({"margin-right": '-=' + slideWidth});
        $('.pollSlider.open').removeClass('open');
    }  else {
        slideWidth = $(sliderDialog).width();
        $(sliderDialog).addClass('open');
        $('#slider-button').animate({"margin-right": '+=' + slideWidth});
        $(sliderDialog).animate({"margin-right": '+=' + slideWidth});
    }
}

function bindControls() {
    $('#slider-button').click(function() {
       slideIt(); 
    });
    $("#liPriority").click(function() {
        sliderDialog = "#dvPriorityDialog";
        slideIt();

    });
    $("#liFasting").click(function() {
        sliderDialog = "#dvFastingDialog";
        slideIt();
    });
}

// init;
$(document).ready(function() {
    bindControls();
 });

Answer 2

Try

$(sliderDialog).stop().animate({"margin-right": '-=400'});

$('#slider-button').stop().animate({"margin-right": '-=400'});

Answer 3

You have multiple problems :

1. You try to move a same element (#slider-button) in function of two different animations (a panel go left and an other go right). To resolve that, the best option is to add a button to each panel. It will be a lot easier to manage global behavior because you have only one animation by panel.

2. You don't stop animation when you want to change them. Store your animation in vars and use .stop() function with the first param to true in you case ( .stop(true) to stop animation and remove it from queue without finish it).

3. Your state test is based on your animated css attribute (margin-right). So you alltime have to wait the end of animation to start the new one. To fix that use vars to store your animations state : ( var firstPanelLastMove = 'left' // or right ... etc).