使用 jquery animate() 链接位置动画

Posted 2023-05-08

【中文标题】使用 jquery animate() 链接位置动画

【英文标题】：chained position animations with jquery animate()

【发布时间】：2011-07-13 04:20:10

【问题描述】：

我想让一组 11 个元素“飞”到一个页面中 - 通过使用 jQuery animate() 的一组链式动画。

我有以下内容：http://bit.ly/g90S3J 这似乎在 FF3.6 中运行良好 但我看到在 IE8 中 - 动画和位置偏离了 - 元素保留在舞台之外，或者在舞台上飞行，而在 FF 中，它们应该聚集在中心周围。

在 FF 中有时也会发生的情况是，元素的最终位置似乎偶尔会偶尔发生变化。奇怪！！

有人可以帮帮我吗？

非常感谢！

【问题讨论】：

FWIW，item1 的上边距为 -1550px，当你为它设置动画时，你正在向它添加 1200px。它仍然会有一个大于其高度的负边距。因此，它仍然会被“隐藏”。

没关系，我看到 top 和 margin-top...

【参考方案1】：

你有这个：

.flyItem 
    display: inline;
    overflow: visible;
    position: absolute;

当我的意思是设置一个初始位置时，只需添加：

  top:0;
   left:0;

到属性，因为你有：

$(function() 
       $("#item1").animate('top': '+=1200px',2000, 'swing', function()
      $("#item2").animate('right': '-=2630px',3000, 'swing', function()
        $("#item3").animate('top': '-=2700px',3000, 'swing');        
                                                                                         );                                                           
                                                                        ); 

       $("#item6").animate('right': '+=1860px',2000, 'swing', function()
       $("#item5").animate('top': '+=1000px',3000, 'swing', function()
        $("#item4").animate('right': '+=1000px',3000, 'swing');          
                                                                                );                                                        
                                                                        ); 


);

“flyItem”元素必须全部位于相对定位的 div 内。

【讨论】：

你必须为每个元素设置一个初始位置，因为 IE8 是 jerk。

@jesper：这不是答案；应该是评论。

我尝试添加 top:0;左：0；但是FF和IE还是有区别的。看看同一个链接 - 我刚刚编辑了蓝星和滚动的位置 - 它们在 IE 和 FF 中看起来不同。

好的 - 找到了解决方案 - 当移动元素位于相对定位的 div 内时，上述方法有效。 （我分别编辑了答案）谢谢！