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/