Animate the image of a hand to make it wave using jQuery

Question

I'd like to animate the hand of a character to make it like if it was waving at somebody, using jQuery. I've tried to swap 2 images (a hand poiting to the left and a hand pointing to the right). But it's not very smooth... Is there a better solution? I've also tried to use a jQuery plugin to rotate the image, but I couldn't find a plugin which works (& compatible with IE8). Thanks for your help!

I don't know Flash, so I thought about jQuery (all the other animations of the projet are done with jQuery too). And I can't use CSS3 as it's not compatible with IE8. Is there another easy option? — july13, Apr 10 '13 at 18:03
You would need at least three, maybe more frames to have a "smooth" animation. You can also use the "sprite" technique. — LSerni, Apr 10 '13 at 21:26

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

Sure, create an image sprite

[hand 1/7][hand 2/7][hand 3/7][hand 4/7][hand 5/7][hand 6/7][hand 7/7]

all in one image, set the boundary for your hand into an element and using jquery just loop the background position of your element.

This answer should get you started:
Background image animation using css3 or jquery?

var c = 0 ;
function loop(){
  c = ++c % 7; // Reminder the number of images (7)
  $('#hand').css({backgroundPosition: (240*c)+'px 0px'}); // 240 = one image/sprite width
}
setInterval(loop, 25);

edited May 23 '17 at 11:56

Community

1
1

answered Apr 10 '13 at 17:59

Roko C. Buljan

164,703
32
260
278

Thanks, I'll try that! – july13 Apr 10 '13 at 18:27

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

as roXon says, you can do like that and this can be also useful: jQuery GIF Animations take a look

edited May 23 '17 at 12:04

Community

1
1

answered Apr 10 '13 at 18:00

doniyor

31,751
50
146
233

score 0 · Answer 3 · answered Apr 10 '13 at 20:44

CSS3 animations/transforms can create the animation

jsfiddle demo

.waving-anim {
    animation:wave 500ms infinite;
    transform-origin:bottom left;
}

@keyframes wave {
    0% {
        transform:rotate(3deg);
    }
    50% {
        transform:rotate(-3deg);
    }
    100% {
        transform:rotate(3deg);
    }
}

does require vendor prefixes (see demo) and is supported in current browsers (IE10 included)

Animate the image of a hand to make it wave using jQuery

3 Answers3