0

I have a set of thumbnails that are swapping images on hover and at the same time doing a fade transition using .animate() by changing opacity. Right now most of it is working but when I quickly hover over an image and go to another one then that image keeps the second image showing and not the first one which is what i want. I think I need sometime like: "if my hover is less than certain amount of time then go back to original image". This will probably ensure that all thumbnails will always be showing the first image even if I quickly rollover them. What piece of code should I add to accomplish this?

link where you can see the problem: http://cargocollective.com/jarrettcreative

This is what I want to do:

http://www.joaoricardomachado.com/

Cœur
  • 37,241
  • 25
  • 195
  • 267
user1161321
  • 1

2 Answers2

0

You need to set a delay(set and stop timer), when you hover over it, the timer will start getting ready to start the animation, whne you leave the element, if the timer never fired the code, then stop/delete the javascript setTimeout(code,millisec,lang). You'll have to fool wiht the milliseconds to get a good setting. Use a clearTimeout to clear it.

this may help more. stop settimeout in recursive function

Community
  • 1
  • 1
Yogurt The Wise
  • 4,379
  • 4
  • 34
  • 42
0

.stop(): http://api.jquery.com/stop

$('#my-selector').stop().animate(...);

.stop() lets us stop the current animation when another one is queued for an element. There are some options for .stop() that you can read about at the API docs.

Jasper
  • 75,717
  • 14
  • 151
  • 146