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() { 

с:

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

я тестировал его, поставив точку останова после этой строки:

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

и позвонив $('#largeImage').unbind(); и все, казалось, сработало, так что вы тоже можете это сделать.

Answer 2

увидеть эту скрипку, например, как использовать done: http://jsfiddle.net/gcnes8b2/1/

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