問題排隊動畫

這裏是我的代碼：問題排隊動畫

$('#gallery-listA li.thumbnail').click(function() { 
      $(this).addClass('chosen'); 
      $('') 
      $('#gallery-listA li.thumbnail').not(this).addClass('notchosenA'); 
      $('#gallery-listB li.thumbnail').addClass('notchosenB'); 
      $('.notchosenB').fadeTo(500,0.0) 
      $('.notchosenB').hide(300); 
      });

的fadeTo和hide動畫並行而不是連續運行。我可以加載動畫作爲回調或手動將它們放入一個隊列，但不是jQuery應該自動排隊動畫？有沒有人看到我的錯誤是什麼？

來源

2011-08-21 dopatraman

嘗試'$（ 'notchosenB'）fadeTo（500，0.0）.hide（300）; '。 – Alex

@Alex多數民衆贊成在同一件事 – Rafay

你怎麼知道他們並行運行？他們不在我的測試：http://jsfiddle.net/fkling/YUZ6J/ –

如果您想在fadeTo動畫完成時執行某些操作，請將其放到fadeTo動畫的完成函數中。

$('.notchosenB').fadeTo(500,0.0, function() { 
    $(this).hide(); 
});

另外，我不認爲它使任何意義發送持續時間與.hide(300)當對象已經爲零不透明，所以我刪除了時間。

既然你正在消退到零不透明，它甚至更好，只需使用.fadeOut()它會褪色零不透明度，然後自動在年底隱藏的項目，所以你不需要.hide()

$('.notchosenB').fadeOut(500);

工作演示在這裏：http://jsfiddle.net/jfriend00/ZrPL2/。

jQuery將排列連續的動畫，但.hide()顯然不被認爲是一個動畫，因此它不會進入隊列（我在jsFiddle中進行了驗證）。你可以看到，這將排隊它們都按順序運行：

$("#test").fadeOut(400).fadeIn(1000).fadeOut(400).fadeIn(1000);

見這裏：http://jsfiddle.net/jfriend00/wBbnK/

來源

2011-08-21 16:45:33 jfriend00

@ jfriend00 - 我想過使用回調函數，但我需要排隊的動畫不止一個，所以使用多個嵌套的回調會變得混亂。我的印象是，jQuery自動排隊動畫，所以我想知道爲什麼它不起作用（並沒有，我檢查過）。有任何想法嗎？ – dopatraman

我在排隊動畫的回答中添加了更多內容。可能最容易避免使用'.hide（）'，並使用其中一個隱藏像'fadeOut（）'這樣的元素的動畫。 – jfriend00

問題排隊動畫

回答

相關問題