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

我创建了一个从右向左滑动的滑块。我正在更换margin-right以使幻灯片工作。jQuery从右向左滑动div将div滑出窗口

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

我用下面的代码：

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

但是，它表现怪异。任何人，我在这里想念什么？

这是我的。

来源

2013-08-19 Sri Reddy

使用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-20 11:24:17

虽然这是我所要求的完美解决方案。我以某种方式努力为今天遇到的其中一种场景做这项工作。我意识到几个节点会打开一个不同大小（宽度）的对话框。我是否需要在数组/变量中存储不同的宽度，然后在SlideIt（）函数中使用，还是有简化的方法？请建议。这里是一个更新的小提琴：http://jsfiddle.net/kuul13/wEVH8/1/ –

最简单的方法是获取您要设置动画的元素的宽度，并将其用于边距而不是设置硬性价值。 –

所以你的意思是获取当前动画对话框宽度的宽度，而不是现在在slideit方法中的硬编码值？ –

尝试

$（sliderDialog）.stop（）动画（{ “余量右”： ' - = 400'}）。（'＃slider-button'）。stop（）。animate（{“margin-right”：' - = 400'}）;

来源

2013-08-19 21:29:32

我尝试过，但还没有得到需要的东西。这里是我更新http://jsfiddle.net/kuul13/XNnHC/987/ –

您有多个问题：

您尝试在两个不同的动画（面板向左走和其他走右）的功能移动相同的元素（＃滑盖按钮）。要解决这个问题，最好的选择是为每个面板添加一个按钮。管理全局行为将会容易得多，因为您只有一个面板动画。
当您想要更改它们时，您不会停止动画。将动画储存在变量中并使用.stop()函数，第一个参数在您的情况下为true（.stop(true)停止动画，并在未完成动画的情况下将其从队列中移除）。
你的状态测试是基于你的动画css属性（margin-right）。所以你总是必须等待动画结束才能开始新动画。要修复使用变量来存储您的动画状态：（var firstPanelLastMove = 'left' // or right ...等）。

来源

2013-08-19 21:50:31

我可以有不同的＃滑块按钮，但它只是很高兴有按钮。我没有得到如何将动画存储在变量中？并使用它们来停止和动画？ –

当一个对话框会左转，另一个返回右时，按钮的行为是什么？回到右边然后去左边跟随另一个对话框？两个按钮更容易。对于变量，如果你不想在var中存储动画，只需停止元素的动画：'$（element）.stop（true）' –

感谢您的解释。尽管如此，我仍需要解决这个问题。 –

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

回答

相关问题