delay() hoặc timeout với stop()?

Question

$('.file a').live('mouseenter', function() { 
    $('#download').stop(true, true).fadeIn('fast'); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

Tôi muốn chức năng mouseenter có số stop() và thời gian trễ là 1 giây. Vì vậy, nếu tôi di chuột qua #download, fadeIn sẽ bắt đầu sau 1 giây trì hoãn. Nếu tôi di chuột ra thì fadeIn sẽ không khởi động. Đưa tôi đi?

Tôi thực sự không biết cách thực hiện điều đó, bất kỳ ý tưởng nào?

Answer 1

Bạn cần sử dụng setTimeout() trong trường hợp này vì cách hoạt động của .delay() (và bạn không thể hủy công việc này).

$('.file a').live('mouseenter', function() { 
    $.data(this, 'timer', setTimeout(function() { 
     $('#download').stop(true, true).fadeIn('fast'); 
    }, 1000)); 
}).live('mouseleave', function() { 
    clearTimeout($.data(this, 'timer')); 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

You can give it a try here.

Nếu bạn sử dụng .delay(), nó sẽ làm giảm hoạt ảnh tiếp theo cho phần tử, bất kể bạn xóa hàng đợi đó trước đó. Vì vậy, bạn cần thời gian chờ mà bạn có thể hủy, điều nêu trên thực hiện bằng cách gọi thủ công setTimeout() và lưu trữ kết quả với $.data() để bạn có thể xóa kết quả sau, qua clearTimeout().

Answer 2

Sử dụng một hàm setTimeout

$('.file a').live('mouseenter', function() { 
setTimeout(function(){ 
    $('#download').stop(true, true).fadeIn('fast'); 
}, 1000); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

setTimeout sẽ thực thi mã bên trong hàm sau khi miliseconds định (trong trường hợp này 1000).

Answer 3

bạn có thể sử dụng tính năng này trên jquery mà không cần sử dụng sự kiện trì hoãn.

$('.file a').hover(function() { 
    time = setTimeout(function() { 
    $('#download').fadeIn(); 
    },1000); 
},function(){ 
    clearTimeout(time); 
}); 

1000 là thời gian sau khi nó $ ('# tải xuống') sẽ bị mờ dần.

Answer 4

tôi đang tìm kiếm câu trả lời cho một câu hỏi tương tự, và tôi thấy rằng .animate() cũng có thể được sử dụng để xử lý này, và nó tuân .stop()

Nó sẽ giống như thế này:

$('.file a').live('mouseenter', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 1000);   // one second delay 
     .animate({opacity:1}, 'fast', 'swing'); 
}).live('mouseleave', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 'slow', 'swing'); 
});