jQuery：mousemove淡入/淡出元素

Question

我有一個視頻播放器頁面，希望播放列表div僅在鼠標移動時淡入，而在鼠標空閑3秒時淡出。 div的類別為“ fadeobject”，其ID為“” video-chooser“

Answer 1

假設您的意思是鼠標移動到任何地方 ，而不僅僅是在相關的<div> ，請在頁面上應用mousemove()事件處理程序：

var fadeout = null;
$("html").mousemove(function() {
  $("div.fadeobject").stop().fadeIn("slow");
  if (fadeout != null) {
    clearTimeout(fadeout);
  }
  fadeout = setTimeout(hide_playlist, 3000);
});

function hide_playlist() {
  $("div.fadeobject").stop().fadeOut("slow");
}

每次鼠標移動時，都會啟動一個計時器，以在三秒后使div褪色，並且取消上一個計時器（如果有的話）。

注意：這里並沒有嚴格要求stop() ，但是在處理多個動畫/效果時建議使用stop() 。

編輯：固定的函數名稱錯字和更新setTimeout參數，以便超時調用工作。

Answer 2

我正在使用它，並且效果很好：

$(document).ready(function() {
    $('.elementClass').fadeTo(0, '0.5').hover(function() {
        $(this).fadeTo(500, 1);
    }, function() {
        $(this).fadeTo(350, '0.8');
    });
});

Answer 3

看看這個

jQuery：如何使鼠標空閑時淡出某些東西。 當鼠標再次移動時，它淡入！