javascript - 在 fadeOut 完成之前触发回调

Question

我构建了一个图像库，其中可以单击 DOM 中的图像。现在我实现了“后退”和“下一个”按钮，以获取下一个/上一个同级图像。

现在我想为图像添加一个漂亮的淡入/淡出动画。这个想法是在 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 的回调。回调函数中的控制台日志每次点击只会输出一次，这意味着“section.image-view-box img”仅选择我期望的一个 img 标签。

我忽略了什么？

Answer 1

您立即调用回调函数，而不是引用稍后调用的回调函数。

最简单的方法是添加一个匿名函数

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