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

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

$(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

您有多个问题：

您尝试根据两个不同的动画移动相同的元素（＃slider-button）（一个面板向左移动，另一个向右移动）。要解决这个问题，最好的选择是为每个面板添加一个按钮。管理全局行为要容易得多，因为按面板只有一个动画。
如果要更改动画，则不会停止动画。将动画存储在变量中并使用.stop()函数将第一个参数设置为true（.stop(true)停止动画并将其从队列中删除而不完成）。
您的状态测试基于您的动画css属性（margin-right）。因此，您必须等待动画结束才能启动新动画。要解决这个问题，请使用变量来存储您的动画状态：（var firstPanelLastMove = 'left' // or right ...等）。

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

3 个答案: