hi i am playing with jquery ui effects and trying to animate some christmas ornaments. the idea is that they would swing if you hover over them. and swing from the midpoint of the top of the image (the top of the string) like a real ornament and not just the whole image moving back and forth.

what i have so far is here: /

its displaying on click, when i do it on hover they dont work as well or realistically.

this is my first foray into jquery animation and i am not really sure how to proceed next. any help would really be appreciated.

thanks!

hi i am playing with jquery ui effects and trying to animate some christmas ornaments. the idea is that they would swing if you hover over them. and swing from the midpoint of the top of the image (the top of the string) like a real ornament and not just the whole image moving back and forth.

what i have so far is here: http://jsfiddle/9ceeW/

its displaying on click, when i do it on hover they dont work as well or realistically.

this is my first foray into jquery animation and i am not really sure how to proceed next. any help would really be appreciated.

thanks!

• javascript
• jquery
• jquery-ui

• if you minus my question can you please explain why. I am just looking for direction in what to do next to rotate from the center top at the same time while bouncing. – liz Commented Nov 2, 2011 at 0:59
• You need some rotation around the point at the end of the string. The CSS3 Transform (rotate) is not fully supported in all browsers yet. Even though it's supported in some browsers, jQuery still will not animate these CSS properties without a plugin. – Sparky Commented Nov 2, 2011 at 1:00
• I did not down-vote you but your question (what next?) may be considered too general. SO is typically about solving very specific programming or code problems. – Sparky Commented Nov 2, 2011 at 1:03
• i see. i was just so new to it... i really just wasnt sure what to ask even – liz Commented Nov 2, 2011 at 1:09

3 Answers 3

You can use the plugin from

• http://www.zachstronaut./posts/2009/02/17/animate-css-transforms-firefox-webkit.html
• add a custom animation queue as in A non-nested animation sequence in jQuery?
• and you end up with animated christmas balls at http://jsfiddle/gaby/9ceeW/8/

update

updated to allow multiple balls to animate at the same time.. http://jsfiddle/gaby/9ceeW/9/

Check out the jQuery Path plugin for animating elements along curves. See the author's demo page.

Not really my thing, but you need to add something like this:

$('#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);
});

Updated fiddle: http://jsfiddle/N7qM9/