淡入和移動

我想要一個簡單的div淡入和同時移動。假設在頂部有一個隱藏的圖像，當我點擊一個按鈕時，圖像應該在頁面中間出現，並且效果漸暗。淡入和移動

，但對我來說，淡入，然後再開始移動...

 $('#shelf').fadeIn('fast').animate({ 
      'bottom': '54%' 
      }, 'slow', function() { 
      // Animation complete. 
     });

來源

2011-07-25 FlintOff

試試這個

$('#shelf').fadeIn('fast').animate({ 
      'bottom': '54%' 
      }, {duration: 'slow', queue: false}, function() { 
      // Animation complete. 
     });

來源

2011-07-25 14:59:05 ShankarSangoli

@Mr。弗林特 - 請接受這個答案，如果它幫助你感謝。 – ShankarSangoli

我接受了你的回答。感謝您的幫助。 – FlintOff

隊列：假是光滑的。謝謝你的提示。 – earl3s

用途：

$('#shelf').animate({ 
     'bottom': '54%', 
     'opacity': 1 
     }, 'slow', function() { 
     // Animation complete. 
});

來源

2011-07-25 14:58:44 Darm

'#Shelf'首先被隱藏。所以我需要首先淡化它。無論如何感謝您的回答。我爲你做了投票 – FlintOff

jQuery的鏈事件，所以它認爲：「完整的淡入，然後做這個動畫「。

如果您在代碼中的褪色（如：opacity: 100%;）在動畫中，它會立刻做的一切。

來源

2011-07-25 14:59:04 rockerest

不，它不這樣認爲，動畫函數不在「fadeIn」的回調函數中。如果它不同時執行，那是因爲fadeIn內部正在使用動畫，所以有一個fx事件隊列順序。 – Darm

-2

因爲你把淡入（）第一鏈。嘗試將兩者分爲兩個獨立的呼叫：

$('#shelf').fadeIn('fast'); 

    $('#shelf').animate({ 
     'bottom': '54%' 
     }, 'slow', function() { 
     // Animation complete. 
    });

來源

2011-07-25 14:59:27 Kon

他也是這樣。 fadeIn（'fast'，function（）{$（this）.animate（{'bottom'））這個動畫不會等待fadeIn完成，：'54％'}，'slow'）;}）;' –

-3

那麼你有快速消失，但移動緩慢。他們都在同一時間開始，但你首先注意到淡入淡出。

讓他們都相同的，他們都將出現在同一時間。

來源

2011-07-25 15:00:29

jQuery的連鎖事件和運行它們按順序，這就是爲什麼淡出動畫之前發生。

下面是使用CSS3過渡屬性照顧動畫的一個例子。

http://jsfiddle.net/jdmiller82/UMVnD/

來源

2011-07-25 15:04:28

回答

相關問題