如何添加一個樣式元素到一個div並刪除它使用javascript

Question

我想添加一個邊緣左css樣式的div元素時，用戶點擊一個按鈕，當一個事件觸發事件，然後刪除它時用戶再次點擊該按鈕。

這是div元素：最理想的是採用動畫，使它在左右滑動，而不是跳躍

<div id="container" class="content" style="margin-left:354px"> 

：

<div id="container" class="content"> 

的Javascript應將其更改爲。

Answer 1

試試這個事件監聽器：

var cont = document.getElementById("container"); 
cont.style.marginLeft = cont.style.marginLeft === "354px" ? "auto" "354px"; 

這並不製作動畫。你可以考慮使用CSS：

#container { 
    transition: margin-left ease 500ms; 
} 

但是，如果你想支持舊的瀏覽器和IE9，去soyuka的答案。

Answer 2

你應該張貼這樣的問題之前閱讀manual ......

$('.content').animate({'margin-left':'354px'}, 1000); 
//where 1000 is the animation time in ms 

回滾：

$('.content').animate({'margin-left':'auto'}); //or your previous value 

Answer 3

您可以用CSS margin-left沿屬性使用jQuery.animate。 animate的第二個參數是持續時間（以毫秒爲單位）。還有一些其他設置可以更好地控制動畫（例如，緩入或退出）。

$('#container').animate({'margin-left':'354px'},3000); 

，並把它搬回相反

$('#container').animate({'margin-left':'0px'},3000); 

活生生的例子：http://jsfiddle.net/xdpCs/1/

Answer 4

嘗試這種解決方案我剛投進JSBin：http://jsbin.com/oyemen/1/edit