Animate({right: 0}) 在 Chrome 和 Opera 中无法正常工作答案

【问题标题】：Animate({right: 0}) not working properly in Chrome and OperaAnimate({right: 0}) 在 Chrome 和 Opera 中无法正常工作
【发布时间】：2015-04-14 15:46:48
【问题描述】：

我尝试仅使用 jQuery 让图像从左向右滑动，它与 Firefox 上的 .animate({right: 0}, 1500) 完美配合，但在 Chrome 和 Opera 上却不行（虽然没有尝试过其他浏览器）。

这是一个代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Slide this squirrel</title>
    </head>
    <body>
        <div style="position:relative;margin:1%;padding:1%;border:1px solid black">
            <img id="squirrel" src="squirrel.jpg" alt="What a squirrel..." style="position:absolute;" />
        </div>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script>
          $(document).ready(function() {
            $("#squirrel").animate({right: 0}, 5000);
          });
        </script>
    </body>
</html>

【问题讨论】：

标签： html google-chrome jquery-animate opera

【解决方案1】：

您需要将100% 分配给CSS 文件中#squirrel 的right 属性。

HTML：

<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
     <img id="squirrel" src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/squirrel_2_line_art.png" height="80" width="100" style="position:absolute;" />
</div>

JS：

$(document).ready(function() {
   $("#squirrel").animate({right: 0}, 5000);
});

CSS：

#squirrel{
    right:100%;
}

我为你创建了一个JSFiddle。

网址：http://jsfiddle.net/m99bybnp/

编辑：

我在JS 文件中做了一个小改动。

$(document).ready(function() {
    // We calculate the width which we need for the wanted displacement
    var width_Animate = $('#container_Squirrel').width() - $('#squirrel').width() ;
    $("#squirrel").animate({left: width_Animate}, 5000);
});

新的 JSFiddle 网址：http://jsfiddle.net/m99bybnp/2/

【讨论】：

谢谢，它修复了动画问题，但现在松鼠图像的最左侧与 div 内容器的最左侧（当然减去填充）不对齐。相反，松鼠被隐藏了，因为右边太多了......
伟大的第二小提琴就像一个魅力！知道为什么 Chrome 和 Opera 的行为如此而不是 Firefox 吗？它是 Webkit / Gecko 的区别吗？（您能否在答案中添加更改以便我接受？）
@IamZesh 每个浏览器都会解释特定表单的 HTML。看这个链接，有意思：stackoverflow.com/a/1182888/4359029
非常感谢您的帮助！