CODEWITHSUNDEEP
javascriptjqueryhtml
Jaiesh_bhai
Jaiesh_bhai

Reputation: 1814

Fire jquery effect once for each mouseover

How can I stop a jquery effect after it's first execution on a mouseover? I want the box to bounce once and stop even if the mouse remains inside the box and repeat this for every time the mouse goes back into the box. Currently it runs the effect infinitely when mouse is inside the box. Thanks in advance.

I have made an example on jsfiddle

I tried: one("mouseover", function() { $( "#div1" ).effect("bounce", "slow"); });

However this will not fire the event again when you leave the box and come back into it.

Upvotes: 1

Views: 687

Answers (3)

Joseph Spens
Joseph Spens

Reputation: 664

This example is similar to other answers, however it abstracts the original bind into a function for reusability.

var $target = $( "#div1, #div2" );

function bounce() {
  $target.one('mouseover', function () {
    $(this).effect("bounce", { times: 1 }, "slow");
  });
}

$target.on('mouseout', bounce);      

bounce();

Upvotes: 0

akbar ali
akbar ali

Reputation: 437

$( "#div1, #div2" ).one('mouseover', function() {
    $(this).effect("bounce", { times: 1 }, "slow");
});

$( "#div1, #div2" ).mouseleave(function() {
    $(this).one('mouseover', function() {
    $(this).effect("bounce", { times: 1 }, "slow");
});
});

check this http://jsfiddle.net/Rxhzg/6/

OR check this one http://jsfiddle.net/Rxhzg/8/ because the above one will continue bounce if mouse is at bottom of box.

$( ".parentDiv" ).one('mouseover', function() {
    $(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});

$( ".parentDiv" ).mouseleave(function() {
    $(this).one('mouseover', function() {
    $(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
});

Upvotes: 1

Yuriy Galanter
Yuriy Galanter

Reputation: 39807

.one() works:

$( "#div1, #div2" ).one('mouseover', function() {
    $(this).effect("bounce", "slow");
});

Demo: http://jsfiddle.net/Rxhzg/1/

UPDATE (based on updated question)

If by "on mouseover once" you mean just "one bounce" - add times parameter:

$( "#div1, #div2" ).mouseenter(function() {
    $(this).effect("bounce", { times: 1 }, "slow");
});

DEMO 2 http://jsfiddle.net/Rxhzg/4/

Upvotes: 5

Related Questions