Jquery .animate，让一个 div 从屏幕外进入，浮动，退出屏幕，并重复答案

【问题标题】：Jquery .animate, make a div enter from off screen, float accross, exit off the screen, & repeatJquery .animate，让一个 div 从屏幕外进入，浮动，退出屏幕，并重复
【发布时间】：2013-08-01 07:37:10
【问题描述】：

我最近刚刚开始自学如何使用 jquery 函数，通常我可以自己解决问题（当然也可以使用 google）。今天我只是没有想法，我发现自己基本上是在兜圈子，所以我希望有人能帮助我。

好的，这是我正在使用的页面：https://dl.dropboxusercontent.com/u/60521097/ServZoo/HTML/index.html

基本上，我要做的就是让云 div 从屏幕左侧进入，浮动到右侧（在中心元素后面），退出屏幕，然后重复。我整天都在摆弄这个，已经到了我不知道哪条路向上的地步：-/好吧，就是这样......

#bg-wrapper {
    max-width:2920px;
    overflow: hidden;
    margin: 0 auto;
    background: url(images/Untitled-3.jpg) left top;
    background-size: 100% 924px;
    background-repeat:no-repeat;
    background-attachment: fixed;
}

#bg-inner {
    width:2305px;
    height: 1080px;
    position: absolute;
    overflow: hidden;   
    margin:0px;
}
#cloudone {
    position:absolute;
    margin-top:5px;
    margin-left:-200px;
    z-index: 1;
    filter:alpha(opacity=80);
  /* CSS3 standard */
        opacity:0.8;
}
#cloudtwo {
    position:absolute;
    margin-top:85px;
    margin-left:-300px;
    z-index: 2;
    filter:alpha(opacity=60);
  /* CSS3 standard */
        opacity:0.6;
}
#cloudthree {
    position:absolute;
    margin-top:65px;
    margin-left:-600px;
    z-index: 4;
    filter:alpha(opacity=70);
  /* CSS3 standard */
        opacity:0.7;
}
#boat {
    margin-top:620px;
    position:absolute;
    margin-right:-2105px;
    z-index: 6;
}

还有脚本...

$(document).ready(function() {
    setTimeout("cloudone()",10);
    setTimeout("cloudtwo()",13);
    setTimeout("cloudthree()",18);
    setTimeout("boat()",40);
});
function cloudone(){
    $("#cloudone").animate({left:"600px"},5000).animate({right:"600px"}, 5000)
    setTimeout("cloudone()",10000);
}
function cloudtwo(){
    $("#cloudtwo").animate({left:"700px"},7000).animate({right:"700px"}, 6000)
    setTimeout("cloudtwo()",13000);
}
function cloudthree(){
    $("#cloudthree").animate({left:"1000px"},10000).animate({right:"1000px"}, 8000)
    setTimeout("cloudthree()",18000);
}
function boat(){
    $("#boat").animate({right:"2105px"},20000).animate({left:"2105px"}, 20000)
    setTimeout("boat()",40000);
}

【问题讨论】：

标签： jquery jquery-animate css-animations html5-animation

【解决方案1】：

通过向animate 参数添加一个函数，该函数将在动画完成后被调用。在该函数中，您可以重置云的位置。重置位置后，您可以使用超时重新启动动画，就像您已经完成的那样。

$("#cloudone").animate({left:"600px"},5000,function(){$("#cloudone").css({"left":"0px"});});

【讨论】：

是的，其中有一个错字（缺少哈希标记），但我认为这就是想法。我建议先让一个动画正常工作，然后对其他三个使用该模式。
修复了缺失的 '#'
添加附加功能来重新定位图像就可以了！稍作调整后，效果很好。查看一下：dl.dropboxusercontent.com/u/60521097/ServZoo/HTML/index.html 感谢大家抽出宝贵时间查看并提供建议。我想我几乎疯了，试图让它自己工作，哈哈；）

【解决方案2】：

它看起来大部分都在工作。帆船看起来不错，对吧？我认为您想增加所有项目的 z-index，以便它们位于页面上的所有其他内容之上。另外，只需将它们全部放在 html 的顶层。这样一来，其他图层就不会优先显示在移动图形之上。

<html>
<head>
 ...
</head>
<body>
  <img id="sailboat" />
  ...
</body>
</html>

【讨论】：