jQuery, replace and animate img element

Question

jQuery 新手在这里！我正在尝试用另一个图像替换一个图像，同时对其进行动画处理。这是我的代码：

.HTML

<img id="salt" src="images/salt.png" alt="salt"/>
<img id="pepper" src="images/pepper.jpg" alt="pepper"/>

.CSS

#salt {
  position: absolute;
  top: 300px;
  left: 180px;
  cursor: pointer;
}
#pepper {
  position: absolute;
  top: 300px;
  left: 180px;
  cursor: pointer;
  display: none;
}

jQuery

$(document).ready(function(){
  $("#salt").click(function(){
    $("#salt").animate({left: '300px'});
    $('#pepper').show();
    $('#salt').replaceWith($('#pepper'));
  });
});

当"replaceWith"处于非活动状态时，动画工作正常;但是当我尝试替换图像时，盐消失了，胡椒出现在它的第一个位置。我需要两个中的一个(真的不介意哪个(来执行动作，然后在动画之后显示盐通常在哪里。提前谢谢你！！

Answer 1

你可以对动画使用回调函数

  $("#salt" ).animate({
    left: '300px'
  }, 5000, function() {
    $('#pepper').show();
    $('#salt').replaceWith($('#pepper'));
  });

动画完成后，将调用该函数