jQuery：设置动画、隐藏和显示内容

当用户单击Edit时，我想隐藏Edit链接，然后隐藏上面的内容并显示一个隐藏的div

我能够做到这一点，但是如果用户单击“取消”按钮，我如何恢复该过程

$('.js-edit').click(function(){

  // Hide 'Edit link'
  $(this).fadeOut(200);

  // Push down 'other' div
  $('.other').animate({
    'marginTop' : "+=400px" //moves down
  });

  // Hide content
  $('.hide-content').delay(200).fadeOut(200);

  // Show hidden content
    $('.show-content').delay(400).fadeIn(200);
});

---

你可以还原你所做的一切。可能是这个吗？使用的方法进行了改进：

$(".js-cancel").click(function() {
  if ($('.other,.hide-content, .show-content').is(':animated')) return;
  $('.js-edit').fadeIn();
  $('.other').animate({
    'marginTop': "-=400px" //moves up
  });
  // Show content
  $('.hide-content').delay(200).fadeIn(200);

  // Hide shown content
  $('.show-content').delay(400).fadeOut(200);
});

---

拨弄：

快速点击每个按钮多次会导致奇怪的行为。这将修复它：

如果（$（'.other、.hide content、.show content'）返回（':animated'）@A.Wolff已添加并更新。给予应有的学分<代码>：D