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

Question

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

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
            });    
    }  
}

这里是 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
        });    
    }  
}

这是 fiddle 的链接:http://jsfiddle.net/PNEhD/1/