jQuery chỉ kích hoạt chức năng di chuột nếu chuột giữ trên phần tử

Question

Tôi chỉ muốn kích hoạt chức năng .mouseover nếu chuột đặt trên phần tử "kích hoạt" trong khoảng thời gian xác định trước (ví dụ: 500 mili giây).

Ví dụ:

$('.featured').mouseover(function() { 
     $('.feat-txt').fadeOut("fast"); 
    }); 

Chỉ khi chuột được đặt trên phần tử .featured trong khoảng thời gian ít nhất 500 mili giây, hàm có thể bắt đầu và .feat-txt có thể FadeOut. Một con chuột đơn giản (chỉ là một chuyển động nhanh) trên phần tử đó không kích hoạt chức năng.

Bất kỳ đề xuất nào về cách thực hiện điều đó?

Answer 1

Tôi đã sử dụng hover ý định trong quá khứ - khá tốt và làm những gì bạn đang sau khi tôi nghĩ:

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

Làm điều đó như thế này:

• Intercept onmouseover sự kiện trên yếu tố đó. Trong chức năng gọi lại không làm bất cứ điều gì; thay vào đó, hãy gọi một hàm khác với độ trễ bạn muốn, ví dụ: trong nguyên mẫu bạn làm điều đó với functionName.delay (500)

• Trong chức năng thứ hai kiểm tra xem con chuột vẫn còn trên phần tử bằng cách sử dụng jQuery bất kỳ cho bạn để có được tọa độ chuột và các yếu tố tọa độ. Nếu con chuột vẫn ở đó, hãy làm bất cứ điều gì bạn muốn làm.

Điều này sẽ không hoạt động trong thời gian dài vì người dùng có thể di chuyển chuột ra ngoài và quay lại phần tử và chức năngName vẫn sẽ kích hoạt.

Nếu bạn không nhớ tôi nói điều đó, đây là một ý tưởng rất tồi.

Answer 3

Thực ra, tôi cũng tìm thấy plugin di chuột jquery này. http://blog.threedubmedia.com/2008/08/eventspecialhover.html

Nó không sử dụng thời gian chờ di chuột qua, nhưng sử dụng tốc độ chuột trong một khung thời gian cụ thể.

Kết quả có thể được nhìn thấy trên ba hộp được hiển thị ở bên phải của trang này: http://www.splendida.it (Tôi hiện đang làm việc trên đó).

Dường như với tôi. Khi chuột nhảy nhanh từ hộp thứ nhất đến hộp thứ ba, không có gì xảy ra, ngay cả khi chuột di chuyển qua phần tử thứ hai.