开发者

jquery hover once?

开发者 https://www.devze.com 2023-02-11 18:10 出处:网络
What\'s the jquery way to make hover function execute once an开发者_如何学编程d then stop? .one()didnt work..

What's the jquery way to make hover function execute once an开发者_如何学编程d then stop?

.one() didnt work..

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

thank you


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')
});


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);
});


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.


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();
);
0

精彩评论

暂无评论...
验证码 换一张
取 消