Question

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

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

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

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

Answer 1

您不会重置不透明度。

尝试更改

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

到

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

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

Answer 2

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

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

您还可以再次使用.animate，以便它在同一个队列中淡入：

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

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

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

2 个答案: