回调动画 jquery ui 删除元素答案

【问题标题】：Callback to animate jquery ui dropped element回调动画 jquery ui 删除元素
【发布时间】：2013-01-28 15:39:00
【问题描述】：

我正在尝试使用 jQuery UI 拖放 div 后为其设置动画。我正在根据 jQuery UI docs () 使用“停止”事件。

但是，我真的很难让已经放下的对象能够为其设置动画。这是我目前所处的位置，尽管我尝试了一些似乎不起作用的方法：

        $('.item').draggable({
            stop: function (event, ui) {
                $(ui.draggable).animate({ bottom: 0 }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

这是使用 jQuery 1.9.0 和 jQuery UI 1.10.0。

我确定这一定很简单 - 我就是无法让它工作。

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

两个问题，这里是固定代码：

 $('.item').draggable({
            stop: function (event, ui) {
                $(this).animate({ "top": "0px" }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

首先 - ui.draggable 实际上并没有选择任何东西，而是返回未定义。更改为this 以影响拖动的元素。

此外，jQuery 没有读取 CSS 属性 bottom。你必须以某种方式使用top 来达到你想要的效果。同样，left 可以工作，但right 不行。

小提琴：http://jsfiddle.net/klatzkaj/kjtD8/

【讨论】：

【解决方案2】：

把ui.draggable（没什么）改成this，会影响拖拽的div。请注意，动画可能不会出现，具体取决于您的布局，但我可以使用它：

http://jsfiddle.net/T4UDp/

由于可拖动对象本身会更改top，因此单独使用bottom: 0 是行不通的。

【讨论】：

谢谢。 this 是我实际尝试的第一件事，但我认为您的其他评论是它不起作用的原因。即当 jquery ui 拖动它使用 top 的东西时，我不能再成功地为 bottom 设置动画。麻烦的是，我需要弹跳动画“向下”，所以我需要弹跳底部而不是顶部。