使用Jquery ui效果制作圣诞装饰品动画

Question

嗨，我正在玩jquery ui效果，并试图动画一些圣诞装饰品。这个想法是，如果你将鼠标悬停在它们上面，它们就会摆动。从图像顶部(线条的顶部)的中点开始摆动，就像一个真正的装饰品，而不仅仅是整个图像来回移动。

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

它在点击时显示，当我在悬停时，它们不会工作得很好或现实。

这是我第一次尝试jquery动画，我真的不确定下一步该怎么做。任何帮助都将不胜感激。

谢谢!

Answer 1

您可以从以下位置使用插件

• http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
• add自定义动画队列就像在A non-nested animation sequence in jQuery?
• and中一样，你最终会在http://jsfiddle.net/gaby/9ceeW/8/

得到一个动画圣诞球。

更新

已更新，允许多个球同时进行动画处理。http://jsfiddle.net/gaby/9ceeW/9/

Answer 2

查看用于沿曲线设置元素动画的jQuery Path插件。请参阅作者的demo page。

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

更新的fiddle：http://jsfiddle.net/N7qM9/