0

我创建了一个从右向左滑动的滑块。我正在改变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。

4

3 回答 3

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();
 });
于 2013-08-20T11:24:17.540 回答
0

您有多个问题：

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

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

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

于 2013-08-19T21:50:31.867 回答
0

尝试

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

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

于 2013-08-19T21:29:32.127 回答