javascript - 如何将样式元素添加到 div 并使用 javascript 将其删除

Question

当用户单击按钮触发事件时，我想向 div 元素添加 margin-left css 样式，然后在用户再次单击按钮时将其删除。

这是 div 元素：

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

Javascript 应将其更改为：

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

理想情况下使用动画，使其看起来向左滑动而不是跳跃。

score 2 · Accepted Answer

在事件监听器中试试这个：

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

这不会对其进行动画处理。您可以考虑为此使用 CSS：

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

但是，如果您想支持旧版浏览器和 IE9，请选择 soyuka 的答案。

score 0 · Accepted Answer

0

试试这个解决方案我刚刚进入 JSBin：http: //jsbin.com/oyemen/1/edit

于 2013-04-12T08:12:53.450 回答

score 0 · Accepted Answer

在发布这样的问题之前，您应该阅读手册...

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

回滚：

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

score -1 · Accepted Answer

您可以jQuery.animate与margin-leftcss 属性一起使用。的第二个参数animate是持续时间（以毫秒为单位）。还有许多其他设置可以更好地控制动画（例如，缓入或缓出）。

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

并将其移回相反的方向

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

4 回答 4