0

I am using jquery flippy plugin to use flip effect on an image. Few other plugins like in this answer serve the same purpose. I am using hover as opposed to click as given in demo to initiate the flip effect and revert the effect on mouse-out. Downside of using hover is that effect is initiated and will finish the cycle even if mouse pointer is on div even for fraction of second.
So is there any way I can stop this behavior:

  • By stopping the transition in between and retain to original state on mouse out by using callback functions supported by plugin.
  • By accelerating the speed of transition(or starting/ending effect with ease) with time so that if mouse is there for a fraction of second, the effect will start with very slow speed and on reverting back to original position there won't be much displacement, hence giving back the rich user experience.

If yes, how ? Or any other suggestions to stop the flip cycle in between.

Community
  • 1
  • 1
Terminal
  • 1,969
  • 5
  • 21
  • 37
  • I am wondering if perhaps `GSAP` would better suit this operation? http://www.greensock.com/gsap-js/ Also... nice article on CSS3 vs JS animations is here: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ – Phlume Jan 28 '14 at 15:49
  • 1
    This post might help - http://stackoverflow.com/questions/435732/delay-jquery-hover-event – TimSPQR Jan 28 '14 at 16:21
  • @TimSPQR Thanks this is my fallback plan :). And in case i have to cancel the event, i will just shake to that div slightly – Terminal Jan 28 '14 at 19:34

0 Answers0