爲每個鼠標懸停彈出一次jquery效果

如何在鼠標懸停首次執行後停止jquery效果？我希望盒子能夠反彈一次，即使鼠標仍然保留在盒子中，每當鼠標移回盒子時都會重複此操作。目前它在鼠標在盒子內時無限地運行。提前致謝。爲每個鼠標懸停彈出一次jquery效果

我已經對jsfiddle

我試過一個例子： one("mouseover", function() { $("#div1").effect("bounce", "slow"); });

但是當你離開箱子，回來到它這不會再次觸發事件。

2013-12-18 Jaiesh_bhai

$("#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"); 
}); 
});

檢查此http://jsfiddle.net/Rxhzg/6/

或檢查這一個http://jsfiddle.net/Rxhzg/8/因爲上面一個將繼續彈跳如果鼠標是在盒的底部。

$(".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"); 
}); 
});

來源

2013-12-18 19:23:14

夥計這真棒！我正在尋找的確切功能！你能解釋一下發生了什麼事嗎？謝謝 –

一個是執行一次，所以再次附加在mouseleave上，以便它在下一次mouseover時再次執行一次。 –

.one()作品：

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

演示：http://jsfiddle.net/Rxhzg/1/

UPDATE（基於更新的問題）

如果通過「鼠標懸停一次」你的意思只是「一個反彈」 - 加times參數：

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

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

來源

2013-12-18 18:57:04

我沒有jQuery中知道任何這樣的函數.. 它非常好:) –

哎呀對不起我本來應該更清晰。 '.one（）'確實有效，但是當你離開盒子並回到它時，它不會讓效果再次激發。 –

@Jaiesh_bhai嗯..你是什麼意思的「onmouseover曾經？」 –

這個例子與其他答案類似，但它將原始綁定抽象爲函數的可重用性。

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

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

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

bounce();

來源

2013-12-18 19:56:12

爲每個鼠標懸停彈出一次jquery效果

回答

相關問題