在淡出完成之前觸發回調

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);
});