javascript - 如何在按下 div 时将其动画化到右侧，然后在再次按下时使用 jQuery 将其返回到第一个位置？

Question

我有多个使用 Bootstrap 类 panel 制作的可点击面板，以这种方式组织:

Image of my website naoh

例如，当我单击第一个面板时，会出现其他一些面板，并且会发生一些很酷的事情。

When you click a panel.

但是我希望我点击的面板位于中心。然后，当单击同一个面板时，我想将所有内容恢复正常(现在可以与每个面板的特定面板一起使用)，包括主面板，因此它应该向左移动。中间的面板不需要动画，右边的面板应该向左并向右移动。

这是我的面板 jQuery 代码，比方说面板 2:

//Panel 2
if ($("#panel_2").data("clicked")) {
    $(".navegadores").toggle(function () { });
} else {
    $(".navegadores").hide();
}

$("#panel_2").click(function () {
    $("#panel_2").data('clicked', true);
    $(".navegadores").toggle(function () { });
    console.log($("#panel_2").data("clicked"));
});

我觉得我需要以某种方式使用 .toggle 方法，或者 .slideToggle，但我很困惑 atm。

Answer 1

像这样的事情应该让你开始:

$('#panel2').click(function(){
   if ( $(this).data('clickstate') == 0 ){
     $(this).animate({
       marginLeft: '200px'
     },1000, function(){
        $(this).data('clickstate', '1');
     });
   }else{
     $(this).animate({
       marginLeft: '0'
     },1000, function(){
        $(this).data('clickstate', '0');
     });
   }
});

#panel2{position:relative;height:100px;width:100px;background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="panel2" data-clickstate="0"></div>