使用jQuery的“Fly-in”动​​画

Question

我的网站上有自动填充功能，当用户从中选择一个项目时，它会被添加到右侧的令牌列表中。我想明确将自动填充选择添加到令牌列表中。如何使用jQuery清楚地显示这种情况？

我在考虑将文本“放入”令牌区域，但是我愿意接受任何能够很好地向用户表明添加了令牌的内容。其他选项包括在令牌出现时闪烁​​，或弹出工具提示。欢迎提出最有效的建议，以及我可以找到文件的地方。

Answer 1

理想的飞行动画并不难实现。 您只需使用设置为：

的动画

1. 位置：绝对
2. top :(目标顶部）
3. 左:(目标左侧）

在回调中，您将位置设置回“静态”并将项目从一个节点传输到另一个节点。

举了一个例子：http://jsfiddle.net/doktormolle/adcvK/

Answer 2

我建议使用jQuery UI提供的高亮效果。在加入列表后，您可以在新项目上调用它。这是一个简单的技巧，使用如下语法：

$('target').effect("highlight", {}, 3000);

基本上，该项目会以所选持续时间的背景颜色发光。颜色可以淡入或淡出。这是一个非常公认的效果，表明已经添加了一些东西。

您可以在jQuery UI文档中获得更多详细信息：http://docs.jquery.com/UI/Effects/Highlight

Answer 3

http://jqueryui.com/demos/effect/

在下拉列表中查看“转移”效果

Answer 4

在git hub上有一个jQuery的插件，非常方便。 https://github.com/s-a/jQuery-flyTo-Plugin