Question

我有一个视频播放器页面，希望播放列表div仅在鼠标移动时淡入，如果鼠标闲置3秒则淡出。 div的类是“fadeobject”，它的ID是“”视频选择器“

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()不是严格，但在处理多个动画/效果时建议使用

。

编辑：修复了函数名称拼写错误和更新的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: how to make something fade out when mouse is idle. When mouse moves again, It fadesIn!

JQuery：mousemove淡入/淡出元素

3 个答案: