CODEWITHSUNDEEP
jquery
Stewie Griffin
Stewie Griffin

Reputation: 9317

jquery hover once?

What's the jquery way to make hover function execute once and then stop?

.one() didnt work..

$(".button-color-2").hover(
  function (){
   dosmth(); 
});

thank you

Upvotes: 8

Views: 19757

Answers (4)

Edward Glasser
Edward Glasser

Reputation: 193

This is an old thread, but here is how I was able to accomplish this. I created a counter that incremented after the effect ran on a mouseenter and used an if statement to see if the counter was greater than 1. If the counter was greater than 1, just make another else statement that breaks out of it entirely (this is to keep it from continuously doing the effect). You'll also need a mouseleave method to reset your counter back to 0. Here is the code I used:

    $("#mydiv").mouseenter(function(){
        if (counter < 1){
            $(this).effect("pulsate", { times:1 }, 300);
            counter = counter + 1;
            return;
        }
        else{
            return;
        }
    });
    $("#mydiv").mouseleave(function(){
        counter = 0;
        return;
    });

If you want to see it working, here is the page: http://webpages.marshall.edu/~glasser1/jquery.html

hover over the white box and it will pulse once.

edit: I forgot to add that you need to initialize your variable counter outside of the function so that it's global and set to zero.

Upvotes: 1

Piyush Mattoo
Piyush Mattoo

Reputation: 16105

Hover binds the handlers for Mouse Enter and Mouse Leave event and is not an event on its own. Hence, in order to have the same effect as Hover, you will have two binds that will trigger once. 

$(".button-color-2").one("mouseenter mouseleave", function(e){
dosmth();
});

If you want to do different things on mouseenter and mouseleave, then bind two different handlers

$(".button-color-2").one("mouseenter", function(e){
dosmth1();
}).one("mouseleave", function(e){
dosmth2();
});

The other option would be to use Hover and then unbind it once you are done.

$('.button-color-2').hover(function() {
dosmth();
$(this).unbind('mouseenter mouseleave')
});

Upvotes: 17

amurra
amurra

Reputation: 15401

If this did not work:

$(".button-color-2").one('hover', function() {
    dosmth();
});

then try this which will execute the hover once and then unbind the hover event:

$('.button-color-2').bind('hover', function(event) {
  dosmth();
  $(this).unbind(event);
});

Upvotes: 1

usoban
usoban

Reputation: 5478

If you just wrapped that piece of code into .one(), you didn't do it right.

With your upper function, you are assigning hover event, not executing it. So you have to use $.one() like this:

$('.button-color-2').one('hover', function()
      dosth();
);

Upvotes: 0

Related Questions