jQuery animate - 圖像淡出後淡入？

我有一個簡單的雲圖像，我希望從瀏覽器的左側到右側，它應該在淡出時從屏幕右側消失，然後淡入並重新開始動畫，從左邊開始。這裏是我的代碼至今：jQuery animate - 圖像淡出後淡入？

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

此功能淡出圖像，因爲它得到了屏幕的右側，但它完全消失，不會再次出現（我已經把'完成「功能鍵重新啓動）。如果我保持不透明度，那麼它會重新開始，所以它與不透明度有關。再一次，我希望圖像可以淡入，並從頭開始再次從左向右移動。

如果您知道解決方案，請讓我知道！謝謝。

來源

2012-12-11 Thomas

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

你也可能要使用的#cloudsAnimated的寬度，而不是硬編碼-200

的你也可以再次使用.animate，使其淡入在同一個隊列：

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

500只是一個猜測..如果你想要真正的動畫時間，它可能是speed除以200的窗口寬度的比例。

來源

2012-12-11 09:17:21

我認爲這樣它仍然不可見，因爲它會立即被動畫淡出。 – Andy

@安迪更新了我的答案;我認爲它會有你想要的淡入效果 –

對不起，我不是那個問這個問題的人，只是指出了它。 ;） – Andy

您不重置不透明度。

嘗試改變

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

到

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

這不會褪色它雖然，但你至少應該看到它。
它也不會在您的解決方案中第一次褪色，是嗎？

來源

2012-12-11 09:14:59 Andy

jQuery animate - 圖像淡出後淡入？

回答

相關問題