CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Karti
Karti

Reputation: 1

Hover effect on link

how to animate a pop-up only after the mouse has been over the link for a specific amount of time. Please help. Using Jquery.????

Upvotes: 0

Views: 151

Answers (2)

JWL
JWL

Reputation: 14201

//Here is my trial
//create a global var called canShow that will be set to true 
//as the mouse is over the cursor, and then reset when the mouse moves away. 
//then use timeout to display the popup after some interval 
//as long as the canShow hasn't been reset to false.

var canShow = false;
var desiredTimeOut = 2000; //in milliseconds
var intervalId;

//assume our link has id 'linkId'
//we'll use jquery since you tag with it
$('#linkId').hover(function(){
  canShow = true;
  intervalId = setTimeout(function() {
    if(canShow == true) $('#myPopupId').show();
  }, desiredTimeOut);

}).mouseout(function() { canShow = false; clearInterval(intervalId);});

Upvotes: 1

Jess
Jess

Reputation: 8700

Hm, is suppose, you could do something like http://jsfiddle.net/mazzzzz/TJvSC/

Upvotes: 0

Related Questions