在 fadeOut 完成之前回调触发

Question

我建立了一个图片库，其中来自 DOM 的图片是可点击的。现在我实现了 "back" 和 "next" 按钮，以获取 next/prev 兄弟图像。

现在我想为图像添加漂亮的 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 的回调。回调函数中的控制台日志每次点击只会输出一次，这意味着 'section.image-view-box img' 只选择了我期望的一个 img-tag。

我忽略了什么？

Answer 1

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

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

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

在 fadeOut 完成之前回调触发

Callback fires before fadeOut finishes

javascript

jquery

image

callback

fadeout