Question

我构建了一个图像库，可以点击DOM中的图像。现在我实施了＆＃34;返回＆＃34;和＆＃34; next＆＃34;按钮，以获取下一个/上一个兄弟图像。

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

我在俯瞰什么？

Answer 1

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

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

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

fadeOut完成之前回调会触发

1 个答案: