在 fadeOut 完成之前回调触发答案

【问题标题】：Callback fires before fadeOut finishes在 fadeOut 完成之前回调触发
【发布时间】：2016-11-20 05:47:26
【问题描述】：

我构建了一个图片库，其中来自 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-tag。

我忽略了什么？

【问题讨论】：

标签： javascript jquery image callback fadeout

【解决方案1】：

您是在立即调用回调函数，而不是在稍后调用它。

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

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

【讨论】：