Question

有一个基于Google Wave的网页（http://wave.google.com/maintenance/index.html）

但不是云从左到右，我想要从右到左，所以我将所有对'left'的引用交换为'right'：

#cloud

position: absolute;
left: 5%;
top: 15px;
z-index: 2;
width: 120px;
height: 91px;
background-image: url(../images/cloud.gif);
background-repeat: no-repeat;

变为：

#cloud1

position: absolute;
right: 60%;
top: 115px;
z-index: 2;
width: 150px;
height: 163px;
background-repeat: no-repeat;

JS的电话是：

function cloud1Move()
{
    if (!cloud1Moved)
    {
        $("#cloud1").css("right", $("#cloud1").offset().right)
    }
    $("#cloud1")
    .animate(
    {
        right: $("#sky").width()
    },
    cloud1Moved ? 12000 : 10000,
    "linear",
    function()
    {
        $(this).css("right", -parseInt($(this).css("width")))
        cloud1Moved = true;
        cloud1Move();
    }
  );
}

这在FF中运行，但Chrome / Safari似乎在加载时将屏幕右侧的所有元素捆绑在一起，然后从右到左制作动画。一旦他们离开屏幕左侧，他们按预期工作。只是初始负载不是我预期的。

如果我只使用left-＆gt;右边，那么它们会在屏幕上正确呈现，并按预期运行。

关于我做错的任何见解（可能在JS调用中）

谢谢，罗布

Answer 1

嗯...... $（“＃cloud1”）。offset（）不返回属性为“right”的对象，只返回“left”和“top”。

http://api.jquery.com/offset/

更好用：

 $("#cloud1").css("left", $("#cloud1").offset().left)

也在你的CSS中。

left: 40%;

jQuery Animate元素在加载时聚集在一起

1 个答案: