jQuery动画-图像淡出后淡入？

我有一个简单的云图像，我希望从浏览器的左侧转到右侧，它应该在淡出时消失在屏幕右侧之外，然后淡入，从左侧重新开始动画。以下是我目前掌握的代码：

var animate = function(targetElement, speed){

    $('#cloudsAnimated').css({left:'-200px'});
    $('#cloudsAnimated').animate(
        {
        'left': "100%",
        opacity:0
        },
        {
        duration: speed,
        easing:"linear",
        complete: function(){
            animate(this, speed);
            }
        }
    );

};
animate($('#cloudsAnimated'), 5000);

该功能会在图像到达屏幕右侧时淡出图像，但它会完全消失，不再出现。我已将该功能的“完成”键设置为重新启动。如果我保持不透明度不变，那么它会重新开始，所以它与不透明度有关。再一次，我希望图像淡入，并开始从左向右重新移动

---

如果您知道解决方案，请告诉我！谢谢。

您不需要重置不透明度

试着改变

$('#cloudsAnimated').css({left:'-200px'});

到

虽然这不会使它褪色，但至少你应该看到它。 它在您的解决方案中第一次也不会褪色，是吗

$("#cloudsAnimated").css({left: '-200px').fadeIn();

您可能还希望使用cloudsAnimated的宽度，而不是硬编码-200

您也可以使用。再次设置动画，使其在同一队列中淡入：

$("#cloudsAnimated").css({left: '-200px');
$("#cloudsAnimated").animate({'left': 0, 'opacity': 1}, 500);

---

500只是一个猜测。。如果你想要真实的动画时间，它可能是速度除以200与窗口宽度之比。

我认为这样它仍然不可见，因为它会被动画立即淡出。@Andy更新了我的答案；我想这会有你想要的法登效应哦，对不起，我不是问这个问题的人，只是指出了它；太好了，谢谢！这似乎是可行的，但现在唯一的一件事是，当它淡入时，我的速度与淡出时不同。我的意思是，它逐渐消失，移动，减速，几乎停止一秒钟，然后又开始移动。我似乎不知道如何使它成为一个连续的运动。这是因为第二次淡入时动画的持续时间要长得多。这是很难做到的，除非您可以在相同的持续时间内设置动画，或者可能使用不同的缓和功能

$("#cloudsAnimated").css({left: '-200px');
$("#cloudsAnimated").animate({'left': 0, 'opacity': 1}, 500);