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

Question

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

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

jsFiddle

$('.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);
});

Answer 1

你可以恢复你所做的一切。可能是这个？用A. Woff的方法改进：

$(".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);
});

小提琴：http://jsfiddle.net/dafckouL/1/