如何在按下div时向右移动div的动画，然后再次按下时，使用jQuery将其返回到其第一位置？

Question

我有多个由Bootstrap类面板构成的可点击面板 ，其组织方式如下：

我的网站的图片naoh

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

单击面板时。

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

这是我的面板的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>