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

Question

我尝试仅使用 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>

Answer 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。

URL: 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 URL：http://jsfiddle.net/m99bybnp/2/

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

Animate({right: 0}) not working properly in Chrome and Opera

html

google-chrome

jquery-animate

opera