Hiệu ứng trả lại của giao diện người dùng JQuery - chỉ bị trả lại một lần khi nhập div

Question

Tôi có một div mà tôi muốn trả lại một lần khi chuột vào/di chuyển qua div.

Mã tôi hoạt động trong Chrome, nhưng không có trong Firefox hoặc IE.

http://jsfiddle.net/d7UjD/73/

Trong Chrome nó bị trả lại một lần như mong muốn nhưng trong FF và IE nảy tiếp tục chừng nào con chuột vẫn còn tại chỗ.

Tôi cũng đã thử $('#box').one("mouseenter", function() { nhưng hộp bị trả lại một lần và các mục nhập tiếp theo vào div không kích hoạt hiệu ứng.

Bất kỳ suy nghĩ nào về lý do khiến các trình duyệt hoạt động khác nhau và tôi có thể làm gì với nó?

Answer 1

LIVE DEMO

$("#box").hover(function(){ 
if (!$(this).data("bouncing")){ 
     $(this).effect("bounce", { direction: 'up', distance: 10, times: 1 }) 
      .data("bouncing", true); 
} 
},function() { 
    $(this).data("bouncing", false); 
}); 

Khi nó bị trả lại, thuộc tính dữ liệu phần tử sẽ giữ true boolean,
bên trong if tuyên bố chúng ta chỉ cần kiểm tra cho nó true hoặc false.
Khi di chuột, chúng tôi chỉ đặt thành sai, để cho phép di chuột mới và ... thư bị trả lại mới! :)

Bạn cũng có thể viết ở trên như:

$("#box").on('mouseenter mouseleave',function(e) { 
    var el = $(this); 
    if(!el.data("b"))el.effect("bounce", {direction:'up',distance:10,times:1}); 
    el.data("b",e.type=="mouseenter"?true:false); 
});