将可拖动对象动画化到其起始位置

Question

我有一个固定位置的 div，所以我只能看到一个选项卡，当您单击此 div 元素上的按钮时，它会显示在舞台上并且也可以拖动，到目前为止一切都很好。现在我正在尝试通过动画使相同的元素返回到其原始位置，并且我还希望它在隐藏为选项卡时不可拖动。我一直在尝试使用 $(some-element).animate()，我可以在 HTMl 上看到它设置了我给他的属性，但它永远不会被动画化，我也不知道如何删除可拖动功能。我正在学习所有这些东西，如果有人可以帮助我弄清楚如何做到这一点，我将不胜感激。非常感谢你们！！。生病留给你我的 jquery 代码和一个小提琴，所以你们可以看到发生了什么。

jquery

$("#minimize").on("click", display);
function display(){
    if(!$("#box").hasClass("draggable")){
        $("#box").animate({bottom: "20"}).addClass("draggable");
        $(".draggable").draggable();    
        }else{
            $("#box").removeClass("draggable");  
            $("#box").animate({
            bottom: -221
            });    
    }  
}

这里是 te Js fiddle http://jsfiddle.net/xtatanx/PNEhD/

更多信息：

如果不拖动，元素会返回到它的位置，但是如果你拖动它，它不会返回到它的位置。

第二次修改：

到目前为止，我已经有了这个，这是一个很好的改进：http://jsfiddle.net/xtatanx/PNEhD/ 但是我想避免在roder中重置样式时跳转，以便在对象所在的任何位置使动画流畅

Answer 1

这是因为可拖动设置了顶部位置，并且需要清除它才能向底部位置设置动画，因为顶部仍然设置。

这是你更新的 JS

$("#minimize").on("click", display);

function display() {
    if (! $("#box").hasClass("draggable")) {
        $("#box").animate({bottom: "20"}).addClass("draggable");
        $(".draggable").draggable();    
    } else {
        $("#box").removeClass("draggable");  
        $('#box').css('top', '');
        $("#box").animate({
            bottom: -221
        });    
    }  
}

这是小提琴的链接：http://jsfiddle.net/PNEhD/1/