CODEWITHSUNDEEP
jqueryjquery-animate
benoît
benoît

Reputation: 1483

mouseenter, mouseleave and overlay

There is no bug, but I would like to know the best tip to deal with this kind of conflict or do it right. How to stop this loop effect.

Here is a basic example : http://jsfiddle.net/aC5bV/

$('a').on({
  mouseenter:function(){
  $tooltip=$('#tooltip');
    $tooltip.animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
  $tooltip=$('#tooltip');
    $tooltip.animate({
        top:50,
        left:50
    },300);  
  }
});​

Upvotes: 1

Views: 908

Answers (3)

benoît
benoît

Reputation: 1483

Finally, I found this (from here)

$(document).mouseover(function(e) {
    if (e.target == $("a").get(0) || e.target == $("#tt").get(0)) {
        $("#tt").animate({top:0,left:0},300);
    }
    else {
        $("#tt").stop().animate({top:200,left:200},300);
    }
});

http://jsfiddle.net/aC5bV/13/

If this is improvable, I will accept a better answer !

Upvotes: 0

kapa
kapa

Reputation: 78671

How to stop this loop effect?

Use .stop(). Please check the manual on the parameters for the best effect.

jsFiddle Demo

$('a').on({
  mouseenter:function(){
    var $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
    var $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:50,
        left:50
    },300);  
  }
});​

Also, you should use var when you define a variable, otherwise you get a global variable. And that dooms the whole world and kills kittens.

Upvotes: 1

Hadi Mostafapour
Hadi Mostafapour

Reputation: 2266

use stop() function ...

    $('a').on({
  mouseenter:function(){
  $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
  $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:50,
        left:50
    },300);  
  }
});

Upvotes: 1

Related Questions