CODEWITHSUNDEEP
javascriptjquery
Flash Thunder
Flash Thunder

Reputation: 12045

.fadeIn() / fadeOut() on mousemove

I got a problem with smooth fadeIn and fadeOut in mousemove... I am doing some calculations about what is under top element, and based on those calculations I would like to fadeIn() or fadeOut() tooltip. The problem is that when moving a mouse, events are being shoot like every few milliseconds.

The sitiuation looks like this:

I move the mouse, tooltip is hidden. Suddenly mouse pointer is on top of element that should trigger fadeIn(), but this element is not the triggerer, because it is behind of some other element. So I need to shoot fadeIn() from mousemove. But, when I shoot it, every few milliseconds, it doesn't work, or works million times. But generally, it does not... animation simply stucks as long as I move mouse, because fadeIn() is being called all over again. I am really tired of this, tried to fix it for like 5 hours and nothing.

I've tried:

  1. .stop() before fadeIn() / fadeOut() in different configurations... but the only visible effect I got was that it looked like show(), because stop(true,true) simply deletes the queue and leads to the end of last animation. So, wow! It is show... how... eghn... great :/
  2. Using :visibe selector to fadeOut() and :not(:visible) to fadeIn() ... well.. that of course did not change much, an with stop() it was just leaving semitransparent tooltip
  3. Using rel attribute to define that the fadeOut() was already shoot and should not be shoot anymore... even worse idea, because it simply did not come back after total fadeOut()
  4. To get some reset and thing, but I can't rest when I don't have this problem resolved - it is sooo annoying!

I wonder if anybody reads this anyway... I wouldn't.

So HOW to limit fadeOut(), fadeIn() events to one each time so it would smoothly fadeIn and fadeOut even from middle of animation when event is triggered by mousemove?

I will probably get -1000 for this question... doooh.

Upvotes: 0

Views: 631

Answers (3)

troelskn
troelskn

Reputation: 117615

I'd suggest you use css for this instead. You lose a bit of compatibility (Most notably older IE's), but it's simpler and will run a lot smoother.

E.g. define opacity in a :hover pseudo class, and then define a transition property with a timing of your choice.

Edit:

Using css in this case has no use because as I said, the event is not trigered by top most layer... stop(true,true) works exactly te same as show() because it is called every few milliseconds, and once is enough to stop fade effect.

In that case, set/unset a class on the fading-element inside your event handler. Let css do the work for you.

E.g.:

<style>
  #tooltip { opacity:0 ; transition:opacity 1s linear }
  #tooltip.enabled { opacity:1 }
</style>
<div class="has-tooltip">Foo</div>
<div id="tooltip">Tooltip</div>
<script>
  $(".has-tooltip")
    .on("mouseenter", function() { $("#tooltip").addClass("enabled") })
    .on("mouseleave", function() { $("#tooltip").removeClass("enabled") })
</script>

Upvotes: 1

Voonic
Voonic

Reputation: 4785

try this, call this function on mouse move

TIMER='';
function onmove()
{
  if(TIMER)
  clearTimeout(TIMER);
  else
  TIMER = setTimeout(function(){

  // use yor code here eg. $('whteverID').fadeIn();

  },10)

}

Upvotes: 0

Piotr Uchman
Piotr Uchman

Reputation: 570

You can try to unbind events before FadeIn/fadeOut and bind again after animation is complete (in complete function).

Upvotes: 0

Related Questions