Javascript/jquery動畫

Question

我對javascript和jQuery lib的工作原理有點困惑。例。 在點擊事件我想讓我的圖像淡入淡出更改來源，然後淡入。我想我的頭這應該工作。你執行一個代碼然後執行下一個代碼。但它傾向於切換並執行代碼。有人能幫助我理解爲什麼會發生這種情況，以及是否有任何解決方案。

$('.under_box').click(function(){ 
var main_source=$(this).attr("src"); 
$("#main_image").fadeTo(300,0); 
$("#main_image").attr("src",main_source).queue(); 
$("#main_image").fadeTo(500,1); 

Answer 1

這些函數往往是異步的，因爲他們不會等待在下一行代碼開始之前完成。你可以嘗試使用這樣的回調函數：

$("#main_image").fadeTo(300,0, function(){ 
     $("#main_image").attr("src",main_source).queue(); 
     $("#main_image").fadeTo(500,1); 
    }); 

這個想法是當fadeTo完成時執行回調函數。

Answer 2

JavaScrypt是一個非阻塞的已知問題，所以在這種情況下最好的方法是設置回調函數，如果你想等待某件事情做些什麼。

$(function(){ 
    var main_image = $("#main_image"); 
    $('.under_box').on('click', function(){ 
     var main_source=$(this).attr("src"); 
     main_image.fadeTo(300,0, function(){ 
      main_image.attr("src",main_source); 
      main_image.fadeTo(500,1); 
     }); 
    }); 
}); 

另外注意，您應該減少您的跳躍到DOM，節省了這樣

var $main_image = $("#main_image"); 

會在內存中保存的jQuery對象，而不是獲取它所有的時間。