将可拖动对象动画化到其起始位置 [英] Animating draggable object to its starting position

问题描述

我有一个固定位置的div，所以我只是可以看到一个选项卡，当你点击这个div元素的按钮，它显示在舞台上，也变成可拖动，到目前为止这么好。现在我试图让这个相同的元素返回到它的原始位置animaton，我也希望它不能被拖动，而被隐藏为一个选项卡。我一直在尝试$（一些元素）.animate（），我可以看到在HTMl它设置我给他的优点，但它从来没有得到动画，我也不知道如何删除draggable函数。我正在学习所有这些东西，我会欣赏，如果有人可以帮助我一点了解如何做到这一点。非常感谢你们！

I have a div with fixed position so i just can see a tab, when you click on the button on this div element it displays in the stage and also become draggable, so far so good. Now I am trying to make this same element return to its original position by animaton and i also want it to not be draggable while is hidden as a tab. I´ve been trying with $(some-element).animate(), and i can see on the HTMl that it sets the propierties i give to him but it never gets animated, I also dont know how to remove the draggable function. I am learning all this stuff and i´ll appreciate if someone could help me a bit figuring out how to do this. thank you very much guys!!. ill leave you my jquery code and a fiddle so you guys can see whats going on.

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/

here is te Js fiddle http://jsfiddle.net/xtatanx/PNEhD/

一些更多信息：

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

The element return to its position if you don´t drag it, but if you drag it around it will not return to its position.

第二次修改：

到目前为止，我有了这个， a href =http://jsfiddle.net/xtatanx/PNEhD/ =nofollow> http://jsfiddle.net/xtatanx/PNEhD/
但我想避免当风格在roder中重置以使流体在对象所在位置时动画。

so far i come with this, wich is a good improve: http://jsfiddle.net/xtatanx/PNEhD/ but i will like to avoid the jump when the style are resetted in roder to make fluid the animation wherever the object is located

推荐答案

这是因为draggable设置了顶部

It's because the draggable sets the top position and it needs to be cleared before you can animate towards a bottom position because the top is still set.

这是您更新的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/

Here's a link to the fiddle: http://jsfiddle.net/PNEhD/1/

这篇关于将可拖动对象动画化到其起始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！