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%分配给right文件中#squirrel的{{1}}媒体资源。

<强> HTML：

CSS

<强> JS：

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

<强> CSS：

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

我为你创建了#squirrel{ right:100%; }。

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

修改

我在JSFiddle文件中进行了一些小改动。

JS

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

Animate（{right：0}）在Chrome和Opera中无法正常工作

1 个答案: