Question

嗨我正在玩jquery ui效果并试图制作一些圣诞饰品。我们的想法是，如果你将它们悬停在它们上面，它们就会摆动。并从图像顶部的中点（字符串的顶部）摆动，就像一个真正的装饰品，而不仅仅是整个图像来回移动。

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

它在点击时显示，当我在悬停时它们不能正常或现实地工作。

这是我第一次涉足jquery动画，我不确定下一步该如何进行。任何帮助都会非常感激。

谢谢！

Answer 1

查看jQuery Path插件，了解曲线上的动画元素。请参阅作者的demo page。

Answer 2

您可以使用

中的插件

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/

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

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

动画圣诞饰品与Jquery ui效果

3 个答案: