animate 函数在 chrome 中有效，但在 Firefox 中无效

Question

我有一个居中的 div 和 4 个其他 div - 居中 div 的每一侧都有一个。当我单击一个按钮时，每个 div 都会滑入框架并将居中的 div 推出。

它在 chrome 中运行良好，但使用 firefox 失败，让我没有来自 firebug 的错误。

Here 是我的实现，目前在 Firefox 中无法正常工作。

如您所见，在 Firefox 中，居中的 div 只是消失了，而不是滑出屏幕。使用 chrome，居中的 div 按预期滑出。

有人可以看看 firebug 并告诉我他们认为可能导致问题的原因吗？

此代码基于一个 jsfiddle，可使用 chrome 或 firefox 正常工作。

这是 jsfiddle 的代码：

这里是 html

<div id="fullContainer">
    <div id="right">

    </div>
    <div id="left">

    </div>
    <div id="top">

    </div>
    <div id="bottom">

    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            This is where your face should go.  Notice that I placed it within a centering div.  
            This will enable the face to be absolutely positioned, and allow for you to modify 
            it's position when the side-bars slide in.
            <div data-move="left">Open Left</div>
            <div data-move="right">Open Right</div>
            <div data-move="top">Open Top</div>
            <div data-move="bottom">Open Bottom</div>
        </div>
    </div>
</div>

这里是 css

#centerContainer {
    position:fixed;
    top:50%;
    left:50%;
    width:0;
    height:0;
}
#relativeContainer {
    position:relative;
}
#fullContainer {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#content {
    position:absolute;
    width:300px;
    height:400px;
    top:-200px;
    left:-150px;
    background:#BADA55;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content.right {
    left:-250px;
}
#content.left {
    left:-50px;
}
#content.bottom {
    top:-300px;
}
#content.top {
    top:-100px;
}

#content div {
    cursor:pointer;
    color:blue;
    text-decoration:underline;
    margin-top:15px;
    text-align:center;
}
#left {
    position:absolute;
    top:0;
    left:-125px;
    height:100%;
    width:100px;
    background:blue;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left.opened {
    left:0;
}

#right {
    position:absolute;
    top:0;
    right:-125px;
    height:100%;
    width:100px;
    background:green;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#right.opened {
    right:0;
}

#top {
    position:absolute;
    left:0;
    top:-125px;
    width:100%;
    height:100px;
    background:yellow;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#top.opened {
    top:0;
}

#bottom {
    position:absolute;
    left:0;
    bottom:-125px;
    width:100%;
    height:100px;
    background:red;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom.opened {
    bottom:0;
}

这里是 javascript：

function SlideOut(element){

    $(".opened").removeClass("opened");
    $("#"+element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function(){

    var move = $(this).attr('data-move');

    SlideOut(move);

});

这里是fiddle

谢谢

凯蒂

Answer 1

我做了一些测试，发现发生了什么。在此fiddle 中复制了此内容，用于说明和演示目的。

在 Firefox 中，如果您要转换 CSS 属性 left，它需要有一个初始值才能开始。如果没有，则不会转换，它只会将值分配给属性。

在 Chrome 中，如果您没有设置初始值，它显然只是从它所在的位置开始，不用担心。

如果您在 Firefox 中查看上述小提琴并单击第一行，它只会显示在更远的位置，而第二行会过渡到上方。唯一的区别是第二行最初设置了left: 0。在 Chrome 上两者的工作方式相同。

如果您将left: 0 放在#content div 上，那么它会像在Firefox 中那样滑动。 （在 Firebug 中测试并确实修复了它）。