Cách yêu cầu .hover() đợi?

Question

Tôi có một trình đơn thả xuống. Bây giờ khi nó trượt xuống nhiều cấp độ, tôi muốn nó thêm thời gian chờ đợi như 2 giây, trước khi nó biến mất, vì vậy người dùng có thể quay trở lại, khi anh ấy bị lỗi .hover().

Có thể không?

mã của tôi cho slide:

$('.icon').hover(function() { 
     $('li.icon > ul').slideDown('fast'); 
    }, function() { 
     $('li.icon > ul').slideUp('fast'); 
    }); 

Answer 1

này sẽ làm cho chức năng thứ hai chờ đợi 2 giây (2000 mili giây) trước khi thực hiện:

$('.icon').hover(function() { 
    clearTimeout($(this).data('timeout')); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    var t = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
    $(this).data('timeout', t); 
}); 

Nó cũng xóa thời gian chờ khi người dùng di chuột trở lại để tránh hành vi điên rồ.

Đây không phải là cách rất thanh lịch để thực hiện việc này, tuy nhiên. Bạn có lẽ nên kiểm tra các plugin hoverIntent, được thiết kế để giải quyết vấn đề cụ thể này.

Answer 2

Ý tưởng chung là sử dụng setTimeout, như vậy:

$('.icon').hover(function() { 
      $('li.icon > ul').slideDown('fast'); 
    }, function() { 
      setTimeout(function() { 
       $('li.icon > ul').slideUp('fast'); 
      }, 2000); 
    }); 

Nhưng điều này có thể làm những việc khác thường nếu người dùng di chuyển chuột ra ngoài và sau đó di chuyển chuột trong một lần nữa nhanh chóng-điều này không giải thích cho thanh toán bù trừ thời gian chờ khi người dùng di chuột qua nó một lần nữa. Điều đó sẽ yêu cầu trạng thái bổ sung.

Answer 3

Cá nhân tôi thích "hoverIntent" plugin:

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

từ trang: hoverIntent là một plugin mà cố gắng để xác định mục đích của người dùng ... giống như một quả cầu pha lê, chỉ với chuột phong trào! Nó hoạt động như (và được bắt nguồn từ) hover tích hợp của jQuery. Tuy nhiên, thay vì ngay lập tức gọi hàm onMouseOver, nó chờ cho đến khi chuột của người dùng chậm lại đủ trước khi thực hiện cuộc gọi.

Tại sao? Để trì hoãn hoặc ngăn tình cờ kích hoạt các hoạt ảnh hoặc cuộc gọi ajax. Thời gian chờ đơn giản hoạt động cho các khu vực nhỏ, nhưng nếu khu vực mục tiêu của bạn lớn, nó có thể thực thi bất kể ý định.

var config = {  
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
interval: 200, // number = milliseconds for onMouseOver polling interval  
over: makeTall, // function = onMouseOver callback (REQUIRED)  
timeout: 500, // number = milliseconds delay before onMouseOut  
out: makeShort // function = onMouseOut callback (REQUIRED) 
}; 
$("#demo3 li").hoverIntent(config) 

Cấu hình tùy chọn

nhạy: Nếu chuột di chuyển ít hơn con số này của pixel giữa khoảng thời gian bỏ phiếu, sau đó là "trên" chức năng sẽ được gọi. Với ngưỡng nhạy cảm tối thiểu là 1, chuột không được di chuyển giữa các khoảng thời gian bỏ phiếu. Với ngưỡng độ nhạy cao hơn, bạn có nhiều khả năng nhận được dương tính giả. Độ nhạy mặc định: 7

khoảng thời gian: Số lượng nghìn giây di chuộtTần chờ giữa đọc/so sánh tọa độ chuột. Khi chuột của người dùng đầu tiên vào phần tử, tọa độ của nó được ghi lại. Chức năng "over" sớm nhất có thể được gọi là sau một khoảng thời gian bỏ phiếu duy nhất. Việc đặt khoảng thời gian bỏ phiếu cao hơn sẽ làm tăng độ trễ trước khi có thể gọi "over" đầu tiên, nhưng cũng làm tăng thời gian tới điểm so sánh tiếp theo. Khoảng thời gian mặc định: 100

qua: Bắt buộc.Hàm bạn muốn gọi trênMouseOver. Hàm của bạn nhận được cùng một đối tượng "this" và "event" giống như nó có trong phương thức di chuột của jQuery.

timeout: Độ trễ đơn giản, tính bằng 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. Thời gian chờ mặc định: 0

ra: Bắt buộc. Hàm bạn muốn gọi trênMouseOut. Hàm của bạn nhận được cùng một đối tượng "this" và "event" giống như nó có trong phương thức di chuột của jQuery. Lưu ý, hoverIntent sẽ chỉ gọi hàm "out" nếu hàm "over" đã được gọi trên cùng một lần chạy đó.

Answer 4

$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){ 
    var $this = $(this); 
    if (e.type === 'mouseenter') { 
     clearTimeout($this.data('timeout')); 
     $this.slideDown('fast'); 
    }else{ // is mouseleave: 
     $this.data('timeout', setTimeout(function(){ 
      $this.slideUp('fast'); 
     },2000)); 
    } 
}); 

Answer 5

Sau đây sẽ ngừng trượt từ gây ra bởi 2 giây:

$('.icon').hover(function() { 
    $('li.icon > ul').delay(2000).slideDown('fast'); 
}, function() { 
    $('li.icon > ul').slideUp('fast'); 
}); 

Answer 6

Tôi nghĩ rằng đây là mã nhu cầu của bạn:

jQuery(document).ready(function($) { 
    var navTimers = []; 
    $('.icon').hover(function() { 
      var id = jQuery.data(this); 
      var $this = $(this); 
      navTimers[id] = setTimeout(function() { 
       $this.children('ul').slideDown('fast'); 
       navTimers[id] = ""; 
      }, 300); 
     }, 
     function() { 
      var id = jQuery.data(this); 
      if (navTimers[id] != "") { 
       clearTimeout(navTimers[id]); 
      } else { 
       $(this).children("ul").slideUp('fast'); 
      } 
     } 
    ); 
}); 

Answer 7

hoặc bạn chỉ đơn giản là có thể sử dụng chuyển tiếp: tất cả 2s dễ dàng-trong-ra. đảm bảo rằng bạn thêm -webkit, -moz và -o cho các trình duyệt khác nhau.

Answer 8

Tôi muốn thêm vào Paolo Bergantino mà bạn có thể làm điều này mà không có sự attribut dữ liệu:

var timer; 
$('.icon').hover(function() { 
    clearTimeout(timer); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    timer = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
}); 

Answer 9

var timer; 

var delay = 200; 

$('#hoverelement').hover(function() { 

    on mouse hover, start a timeout 

    timer = setTimeout(function() { 

     Do your stuff here 

    }, delay); 

}, function() { 

    Do mouse leaving function stuff here  

    clearTimeout(timer); 
}); 

// chỉnh sửa: Mã instert