jquery動畫不等待回調

Question

我有一個jquery動畫，在動畫完成之前從其函數運行代碼。這段代碼是在正在使用的頁面是沒有在附近完成，但是如果你想看看它的cottageboards.com/orderform

$('#snow').fadeIn(500, "linear", function() { 
    $('#largeImage').fadeOut(500, function() { 
     $('#largeImage').attr('src', selectedimg).load(function() { 
      $('#largeImage').fadeIn(1000, function() { 

//Everything below here is running before the above image's fade in is complete 


       $('#snow').fadeOut(5000); 
       var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]'; 
       $($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular')); 
       $(selectionage).attr('src', $(selectionage).data('selected')); 
       selectedid = '#' + $(selectionage).attr('id'); 
       $('#selected_thumb').val(selectedid); 
       $('#selected_info').html($(selectionage).data('desc')); 
       $('#name').html($(selectionage).data('name')); 
       if ($(selectionage).data('val') === 99) { 
        $('#upload').show(); 
        $('#displayinfo').hide(); 
       } else { 
        $(selection).val($(selectionage).data('val')); 
        $('#upload').hide(); 
        $('#displayinfo').show(); 
       } 
       $('#next').prop('disabled', false); 
      }); 
     }); 
    }); 
}); 

當重寫，以便負載的功能而來的SRC改變它像一個前魅力。謝謝你們的幫助！

工作代碼：

$('#snow').fadeIn(500, "linear", function() { 
    $('#largeImage').fadeOut(500, function() { 
     $('#largeImage').unbind().load(function() { 
      $('#largeImage').fadeIn(1000, function() { 
       $('#snow').fadeOut(5000); 
       var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]'; 
       $($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular')); 
       $(selectionage).attr('src', $(selectionage).data('selected')); 
       selectedid = '#' + $(selectionage).attr('id'); 
       $('#selected_thumb').val(selectedid); 
       $('#selected_info').html($(selectionage).data('desc')); 
       $('#name').html($(selectionage).data('name')); 
       if ($(selectionage).data('val') === 99) { 
        $('#upload').show(); 
        $('#displayinfo').hide(); 
       } else { 
        $(selection).val($(selectionage).data('val')); 
        $('#upload').hide(); 
        $('#displayinfo').show(); 
       } 
       $('#next').prop('disabled', false); 
      }); 
     }).attr('src', selectedimg); 
    }); 
}); 

Answer 1

你要綁定的負載功能largeimage單擊每次。第一次點擊加載函數被調用一次，第二次，它被調用兩次。我懷疑所有東西都搞亂了，因爲你在同一個對象上發射多個.fadeIns，並且它們並行運行。

只需撥打$('#largeImage').load(...)一次，而不是每次點擊。當然，你必須對你的俘獲變量做些什麼，但這是一個不同的問題。或者，撥打$('#largeImage').unbind().load(...)

如果這是難以遵循，替換此行：

$('#largeImage').attr('src', selectedimg).load(function() { 

有：

$('#thumbs').delegate('img','click', function() { 

：

$('#largeImage').unbind().attr('src', selectedimg).load(function() { 

我通過把一個破發點這條線後進行了測試

並呼籲$('#largeImage').unbind();和一切似乎工作，所以你也可以這樣做。

Answer 2

看到小提琴，例如如何使用done：http://jsfiddle.net/gcnes8b2/1/

$('span').click(function() { 
    $('#1').fadeIn({ 
     duration: 1000, 
     done:function(){ 
      $('#2').fadeOut(1000); 
      // etc 
     } 
    }); 
});