Jquery: làm thế nào để làm cho một cái gì đó mờ dần khi chuột nhàn rỗi. Khi chuột di chuyển một lần nữa, nó sẽ biến mất!

Question

Tôi có một div được gọi là "#top". Tôi muốn nó mờ đi khi chuột là nhàn rỗi trong 3 giây. Khi chuột di chuyển một lần nữa, làm cho nó xuất hiện (mờ dần, tất nhiên)

Có ai biết cách thực hiện điều này không?

Cảm ơn rất nhiều.

Answer 1

Sử dụng setTimeout, tiết kiệm giá trị trả về đâu đó (để hủy bỏ nó với clearTimeout khi di chuyển chuột một lần nữa):

var timer; 
$(document).mousemove(function() { 
    if (timer) { 
     clearTimeout(timer); 
     timer = 0; 
    } 

    $('#top:visible').fadeIn(); 
    timer = setTimeout(function() { 
     $('#top').fadeOut() 
    }, 3000) 
}) 

Bạn sẽ muốn điều này bên trong $(document).ready() hoặc tương tự.