1

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

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);

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

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

4

2 回答 2

0

您不会重置不透明度。

尝试改变

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

到

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

虽然它不会淡入淡出，但您至少应该看到它。
它也不会在您的解决方案中第一次消失，是吗？

于 2012-12-11T09:14:59.107 回答
0 
$("#cloudsAnimated").css({left: '-200px').fadeIn();

您可能还想使用宽度#cloudsAnimated而不是硬编码 -200

您也可以.animate再次使用，使其淡入同一队列：

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

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

于 2012-12-11T09:17:21.127 回答