Обратный звонок перед завершением fadeOut

Question

Я построил галерею изображений, в которой изображения с DOM можно щелкнуть. Теперь я применил кнопки «назад» и «следующий», чтобы выбрать следующее/предыдущее изображение сестры.

Теперь я хотел добавить приятную анимацию fadeIn/fadeOut для изображения. Идея заключается в постепенном исчезновении изображения перед изменением атрибута src, переключением и постепенным исчезновением изображения, поэтому он будет изменен. Вот код:

$("section.image-view-box .icon-next").unbind('click'); 
    $('section.image-view-box .icon-next').click(function(){ 
    var currentImgObj = $('.project-load img.active-view'); 
    var newImgObj = currentImgObj.parent().next().children('img:only-child'); 
    if (newImgObj.length > 0) { 

     $('section.image-view-box img').fadeOut(300, setNewViewImage(currentImgObj, newImgObj)); 

    } 
    }); 

    function setNewViewImage(currentImgObj, newImgObj) { 
    console.log('fired'); 
    $('section.image-view-box img').attr('src', newImgObj.attr('src')); 
    currentImgObj.removeClass('active-view'); 
    newImgObj.addClass('active-view'); 
    setNavButtonState(); 
    $('section.image-view-box img').fadeIn(); 
    } 

Но изменение образа будет во время FADEOUT. Это означает, что обратный вызов fadeOut будет вызван до завершения анимации. Консольный журнал в функции обратного вызова будет выводиться только один раз за клик, а это значит, что «section.image-view-box-img» выбирает только один тег img, который я ожидал.

Что я могу увидеть?

Answer 1

Вы вызываете функцию обратного вызова немедленно, не ссылаясь на то, что она будет вызвана позже.

Самый простой будет просто добавить анонимную функцию

$('section.image-view-box img').fadeOut(300, function() { 
    setNewViewImage(currentImgObj, newImgObj); 
});