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のコールバックが呼び出されます。コールバック関数内のコンソールログは、1回のクリックにつき1回だけ出力されます。つまり、 'section.image-view-box img'は、私が期待していたimgタグを1つだけ選択します。

私は何を見落としていますか？

Answer 1

コールバック関数を直ちに呼び出すのではなく、コールバック関数を後で呼び出します。

最も簡単なだけで無名関数

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

に追加することです