jQuery的动画元素负载

一起群聚得到了基于谷歌Wave（http://wave.google.com/maintenance/index.html）页面jQuery的动画元素负载

而是云从左到右我想正确的离开，所以我换到 '左' 到 '右' 的所有引用：

#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-> right，那么它们在屏幕上的位置就会正确呈现并且表现得像预期的那样。

感谢对我在做什么不正确任何见解（可能是在JS调用），罗布

来源

2012-01-14 rmccallum

作为一个开发项目，我跑了一个本地版本的Google Wave（上图），并将调用从左到右改变。我能够在屏幕右侧复制bucnhing，所以问题似乎是在执行CSS元素的负载定位（FF除外）或JS中的开始动画。 – rmccallum 2012-01-14 03:18:02

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

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

更好地利用：

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

而且在你的CSS了。

left: 40%;

来源

2012-01-14 04:59:24

这会解释它！ – rmccallum 2012-01-14 10:51:33

jQuery的动画元素负载

回答

相关问题