Jquery: Làm thế nào để thêm một sự chậm trễ để mouseleave vì vậy nếu ai đó vô tình di chuyển ra khỏi các yếu tố vô ý, nó vẫn mở

Question

Plugin hoverintent là trái ngược với những gì tôi cần. Tôi có một .popup được kích hoạt bởi .trigger, khi tôi di chuột ra khỏi nó, tôi muốn .popup KHÔNG phai trong một vài giây, nhưng nếu tôi di chuột ra, sau đó di chuột lên một lần nữa, hủy bỏ fadeout mà sẽ xảy ra và giữ .popup mở.

Có ai biết tôi sẽ làm điều này như thế nào không?

này không hoạt động, nhưng nó là một ý tưởng:

$('.trigger').hover(function(){ 
     $('.popup').fadeIn(600) 
    }, function() { 
     $('.popup').delay(2000, function(){ 
      if ($(this).blur() = true) { 
       $('.popup').fadeOut(600) 
      } 
     }); 
    }) 

Answer 1

jQuery HoverIntent plugin chính xác là những gì bạn đang tìm kiếm.

Thuộc tính thời gian chờ sẽ đặt khoảng thời gian chuột cần phải nằm ngoài vùng trước khi chức năng ra được gọi.

Trích từ trang web của ý định di chuột:

thời gian chờ: Sự chậm trễ đơn giản, trong mili giây, trước khi chức năng "out" được gọi. Nếu người dùng quay trở lại phần tử trước khi hết thời gian chờ, chức năng "out" sẽ không được gọi (cũng như không gọi hàm "over"). Điều này chủ yếu là để bảo vệ chống lại quỹ đạo cẩu thả cẩu thả/con người tạm thời (và vô tình) đưa người dùng ra khỏi yếu tố mục tiêu ... cho họ thời gian để quay trở lại. Mặc định thời gian chờ: 0

Để thiết lập nó ...

$('.trigger').hoverIntent({ 
    over: startHover, 
    out: endHover, 
    timeout: 2000 
}); 

Sau đó xác định các chức năng để xử lý over và out

function startHover(e){ 
    //your logic here 
    $('.popup').fadeIn(600) 
} 

function endHover(){ 
    //your logic here 
    $('.popup').fadeOut(600) 
} 

EDIT:

Bạn cũng có thể điều chỉnh tài sản interval để tăng/giảm lượng thời gian cho startHover func tion để kích hoạt ... mặc định được đặt thành 100 mili giây ... bạn có thể đặt thành 0 để kích hoạt cửa sổ bật lên ngay sau khi chuột vào vùng kích hoạt nếu bạn muốn.

Answer 2

Bạn có thể thử sử dụng các plugin jquery hoverIntent.

Answer 3

này làm việc cho tôi:

$(".triger").mouseenter(function() { 
    $(this).find("popup").fadeIn(); 
}).mouseleave(function() { 
    $(this).find("popup").delay(200).fadeOut(); 
}); 

Answer 4

Đây là cách đơn giản nhất để làm điều đó, mà không cần bổ sung thêm:

$('.trigger').hover(function() { 
    clearTimeout(this.timer); 
    $('.popup').fadeIn(600); 
}, function() { 
    this.timer = setTimeout(function() { 
     if ($(this).blur() = true) { // off topic: you should to check this condition ;) 
      $('.popup').fadeOut(600); 
     } 
    }, 2000); 
}); 

setTimeout() và clearTimeout() là JS chức năng có nguồn gốc của HTML DOM Window đối tượng từ mãi mãi.