jquery - 从边缘 :auto . 动画元素

Question

我有一个简单的 div 元素，我使用 CSS 动画来创建一个流畅的布局:

div{
-webkit-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

尽管使用像素特定比率为元素设置动画非常简单 http://jsfiddle.net/yBJ42/1/ 当元素以 margin:0 auto 居中时失败 有什么办法可以解决这种行为吗？不幸的是，我不能使用绝对定位元素，因为我的布局中的主容器使用 CSS calc 来计算它的宽度，我想保留 margin-right:0 作为边栏显示。

此外，使用 JavaScript 计算和调整容器宽度和边距并不是我处理这种情况的首选方式。

提前致谢。

Answer 1

这是您想要的 jQuery 版本: DEMO

var centerMargin=($(window).width()/2)-($('div').width()/2)+'px';
$('div').css('margin-left',centerMargin);
var toggled=false;
$(".animate").click(function(){
    if(!toggled){
        $('div').animate({marginLeft:'0px'},1000);
        toggled=true;
        }
    else{
        $('div').animate({marginLeft:centerMargin},1000);
        toggled=false;
    }
});