2

Hey all i have this code here on jsfiddle: http://jsfiddle.net/d7UjD/6/

I have 2 problems with it:

1) I need a way to use the animation stop() so that if you rapidly run the mouse over the image lots of times it doesn't continue to play and play..

2) The "zoom" part i am needing home help to zoom the width AND height. Currently i can only do the width. Need to make it zoom out evenly.

Any help with this would be great!

David

StealthRT
  • 10,108
  • 40
  • 183
  • 342

2 Answers2

10

animate.css .. Best solution for all the animations effects..

Try this http://daneden.me/animate/

Cheers...!!!

Dhruv
  • 10,291
  • 18
  • 77
  • 126
5

Probably could be done differently but here is one way..

1) Use the mouseleave function and stop the animation on the bounce effect.

2) Use percentages (%) instead of pixels for the zoom effect.

http://jsfiddle.net/d7UjD/9/

luke2012
  • 1,724
  • 1
  • 13
  • 20
  • Awesome for #2 there, luke. However, for the first problem it still seems to still be there. If you roll your mouse over it and back out a lot of times (rapidly) you can see the google logo move up and up. – StealthRT Apr 30 '12 at 17:26
  • Check out this Hover flow plugin which should solve the issue - http://www.2meter3.de/code/hoverFlow/ – luke2012 May 01 '12 at 00:13