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/