jQuery 从右向左滑动 div 将 div 滑出窗口

Question

我创建了一个从右向左滑动的滑块。我正在更改 margin-right 以使幻灯片正常工作。

根据要求，我有一个树形视图，当用户单击任何节点时，它会打开一个包含一些控件的滑动对话框。当用户单击任何节点时，它应该首先关闭先前打开的对话框，然后打开当前选定节点的对话框。当用户单击节点时，我能够完成这项工作，对话框打开，当用户再次单击同一节点或滑块按钮时，对话框隐藏。但是不知何故，当用户单击任何其他节点时隐藏的代码无法正常工作。它将滑块按钮和对话框移开，我什么也看不到。

我使用了以下代码：

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'});
}

我想，这就像查找先前选择的对话框是否与当前不同一样简单，而不仅仅是在用户再次单击同一节点时调用隐藏对话框的相同代码。 IE。

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

但是，它的行为很奇怪。任何人，我在这里错过了什么？

这是我的jsFiddle。

Answer 1

使用你所拥有的 DOM 等，我更新了 JS 以在动画返回后在它们之间切换（这里是 Fiddle 的实际操作）：

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

试试

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

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

Answer 3

你有多个问题：

1. 您尝试使用两个不同的动画（一个面板向左，另一个向右）移动相同的元素（#slider-button）。要解决这个问题，最好的选择是为每个面板添加一个按钮。由于面板只有一个动画，因此管理全局行为会容易得多。

2. 当您想要更改动画时，您不会停止动画。将您的动画存储在 vars 中，并在您的情况下使用 .stop() 函数并将第一个参数设置为 true（.stop(true) 停止动画并将其从队列中移除而不完成它）。

3. 您的状态测试基于您的动画 css 属性（margin-right）。所以你必须等待动画结束才能开始新的动画。要解决这个问题，请使用 vars 来存储动画状态：(var firstPanelLastMove = 'left' // or right ... 等)。