javascript - 如何淡出图像，然后使其出现在 jquery 的另一个位置？

Question

我的图像在某个 div，它的 z-index 是最高的

当我点击某个东西时，我希望它淡出，然后淡入另一个指定的位置。在另一个类的图像下方:) 这是一个“aaa”类。

我是这样做的：

          $('img.classy').fadeOut();
          $('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
          $('img.classy').fadeIn();

它嵌入到点击事件。当我运行它并单击该区域时，img.classy 首先更改它的位置，然后在新位置上淡出并淡入。我显然希望这样做：淡出-> 不可见时更改位置-> 在新位置淡入位置。怎么做？

Answer 1

这将做：

$('img.classy').fadeOut(function() {
    $('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
    $('img.classy').fadeIn();
});

因为fadeOut和fadeIn是异步函数，所以脚本会继续运行，这些会导致您img立即更改其位置。

Answer 2

您需要等到fadeOut 完成。我为你添加了一个回调函数。

$('img.classy').fadeOut('slow', function() {
    $(this).css('top',$(el).find('img.aaa:last').height()+60);
    $('img.classy').fadeIn();
});

Answer 3

这将克隆 img，将其删除并将其附加到另一个包装器中：

   .aaa {position: relative}
   .classy {position: absolute; right:0; top:0}

    $('img.classy').fadeOut(
      cloned = $(this).clone(true);
      $(this).remove();
      $("img.aaa:last").append(cloned);
      $(".classy").fadeIn();
    );