firefox使用jQuery animate方法和绝对位置的奇怪行为答案

【问题标题】：firefox's strange behavior using jQuery animate method and absolute positionfirefox使用jQuery animate方法和绝对位置的奇怪行为
【发布时间】：2013-09-14 09:13:14
【问题描述】：

我在使用 jQuery 的 (jQuery1.9.1) 动画方法时遇到问题。这是我在 jsfiddle 中的代码：http://jsfiddle.net/AySas/3/ 我想使用相对百分比使 div 更宽，即：

html:
<div id="h_divCenter">
    <div id="h_divIETodos" >
        <div id="h_divIIEodoList" class="quadContent">
            <ul id="h_ulIETodoList">
                <li>itemC 3</li>
            </ul>
        </div>
    </div>

css:
#h_divCenter {
    position:absolute;
    top:0;
    left:20px;
    right:100px;
    bottom:0;
    margin: 5px;
    background: #0FF;
}
.quadContent {
    position: absolute;
    top: 41px;
    bottom: 2px;
    padding: 1px 1% 2px 1%;
    width: 98%;

}
#h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
    width: 100%;
    height: 100%;
    list-style-type: none;
    overflow: auto;
}
 #h_divIETodos {
    position: absolute;
    margin: 2px;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 50%;
    color: #DE3C3C;
    border: 1px solid #DE3C3C;
     -webkit-box-shadow: 0px 0px 10px #DE3C3C;
     -moz-box-shadow: 0px 0px 10px #DE3C3C;
     box-shadow: 0px 0px 10px #DE3C3C;
 }


javascript:
$('#btnTest').on("click", function(){
    $("#h_divIETodos").animate({
        right: "+=20%"
    },500);
});

这个 div 有一个绝对位置，我已经设置了 css 的 top,right,bottom,left 属性。它在 chrome 中运行良好。但在 Firefox 中，您可以看到 div 的右边缘不能移动“20%”。以前有没有其他人遇到过类似的问题？我真的很感谢你的帮助。非常感谢！

【问题讨论】：

标签： javascript jquery css firefox jquery-animate

【解决方案1】：

您可以改为使用计算像素。按预期工作。

jsFiddle Demo

$('#btnTest').on("click", function(){

        $("#h_divIETodos").animate({

            right: "+=" + ($(this).parent().width() * 0.2) + "px"
        },500);
    });

【讨论】：