使用 Jquery ui 效果动画圣诞饰品答案

【问题标题】：animate christmas ornaments with Jquery ui effects使用 Jquery ui 效果动画圣诞饰品
【发布时间】：2011-11-02 00:54:44
【问题描述】：

嗨，我正在玩 jquery ui 效果并尝试为一些圣诞饰品制作动画。这个想法是，如果您将鼠标悬停在它们上方，它们会摆动。并从图像顶部（弦的顶部）的中点摆动，就像一个真正的装饰品，而不仅仅是整个图像来回移动。

到目前为止我所拥有的是： http://jsfiddle.net/9ceeW/

它在点击时显示，当我在悬停时执行它时，它们的工作效果不佳或不真实。

这是我第一次涉足 jquery 动画，但我不确定接下来如何进行。任何帮助将不胜感激。

谢谢！

【问题讨论】：

如果您减去我的问题，请解释原因。我只是在寻找下一步的方向，以便在弹跳的同时从中心顶部旋转。
您需要围绕字符串末尾的点进行一些旋转。尚未在所有浏览器中完全支持 CSS3 变换（旋转）。即使某些浏览器支持它，jQuery 仍然不会在没有插件的情况下为这些 CSS 属性设置动画。
我没有否决你，但你的问题（下一步是什么？）可能被认为过于笼统。 SO 通常是关于解决非常具体的编程或代码问题。
我明白了。我对它太陌生了……我真的不知道该问什么

标签： javascript jquery jquery-ui

【解决方案1】：

您可以使用来自

的插件

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
添加自定义动画队列，如A non-nested animation sequence in jQuery?
您最终会在http://jsfiddle.net/gaby/9ceeW/8/ 获得动画圣诞球

更新

更新为允许多个球同时动画..http://jsfiddle.net/gaby/9ceeW/9/

【讨论】：

天哪，这太棒了。正是我想要做的......我需要把它拆开并弄清楚谢谢。
@liz, festive :) (也许你应该把它们放在文本菜单后面，这样它们就不会导致鼠标光标闪烁.. 通过设置 #mainmenu 的 z-索引大于 1.. 除非您不喜欢动画时文本在图像上的效果..)

【解决方案2】：

查看jQuery Path 插件，用于沿曲线设置元素动画。见作者demo page。

【讨论】：

【解决方案3】：

不是我的菜，但你需要添加这样的东西：

$('#ball1').click(function () {
    $(this).effect("bounce", { direction:'left', times:1, distance:60 }, 500);
    $(this).effect("bounce", { direction:'left', times:1, distance:30 }, 750);
    $(this).effect("bounce", { direction:'left', times:1, distance:15 }, 1000);
    $(this).effect("bounce", { direction:'left', times:1, distance:5 }, 1250);
});

更新小提琴：http://jsfiddle.net/N7qM9/

【讨论】：

好的，我明白你的意思，但这仍然会在 90 度平面上以水平方式反弹整个 div 对吗？我想做的是让挥杆更自然……
是否有同时旋转和弹跳之类的东西？
啊，我明白了...可以工作。我会在插件之前尝试一下，看看它是否可以工作。
@hafichuk，jsFiddle 中的演示会很好，因为我没有得到你在这里做的事情。它看起来仍然不会旋转。
@Sparky672 jsfiddle.net/N7qM9 这只是 liz 的代码，对反弹方法进行了细微调整。没有别的了。