如何在按下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>