CODEWITHSUNDEEP
javascriptjquery
UserIsCorrupt
UserIsCorrupt

Reputation: 5025

Make lingering hover repeat action in jQuery

$('#test').hover(
 function () {
  $(this).append('Blah');
 }
);

How can I make the jQuery repeatedly append Blah in #test based on how long you are hovering over #test?

For instance, how can I append Blah once every second you are hovering over #test?

Upvotes: 0

Views: 234

Answers (4)

m90
m90

Reputation: 11822

You can use setInterval to do so:

var appending; //var to store the interval

$('#test').hover(function(){ //on mouseenter
   var $this = $(this); //store the context, i.e. the element triggering the hover
   appending = setInterval(function(){ //the following function gets executed every second until the interval is cleared
      $this.append('<p>Blah</p>'); //append content to context
   },1000); //1000 meaning the repetition time in ms
},function(){ //on mouseleave
   clearInterval(appending); //clear the interval on mouseleave
});

Upvotes: 2

Manse
Manse

Reputation: 38147

You could use setInterval like this :

var myInterval = false;
$('#test').hover(
   function(){
      $that = $(this); 
      // need to save $(this) as 'this' will be different within setInterval
      myInterval = setInterval(function(){
         $that.append('Blah');
      }, 100); // repeat every 100 ms
   },function() {
      clearInterval(myInterval);  // clear the interval on hoverOut
   }
);

Working example here

Upvotes: 4

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

(function() {
   var intv;
   $('#test').hover(
     function () {
        var $this = $(this);
        intv = setInterval(function() {
          $this.append('Blah');
        }, 1000);
     },
     function() {
       clearInterval(intv);
     }
  );
}());

I've enclosed all the code inside a anonymous scoped function so to not pollute global scope, and I cached a reference to $(this) to avoid a new evaluation every second, inside the timeout

Upvotes: 2

Bibin Velayudhan
Bibin Velayudhan

Reputation: 3103

use setInterval()

$('#test').hover(
 function () {
setInterval(function() {
  $(this).append('Blah');
},1000)
 }
);

Upvotes: 0

Related Questions