当前位置：文江博客话题详情

JQuery：鼠标移动淡入/淡出元素

发布于 2024-08-17 00:15:02 字数 97 浏览 8 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末的微笑 2024-08-24 00:15:02

假设您的意思是鼠标移动任何地方，而不仅仅是在相关的

上移动，应用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 参数，以便超时调用有效。

Assuming you mean the mouse moves anywhere and not just over the relevant <div> apply a mousemove() event handler to the page:

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");
}

Every time the mouse moves a timer is started to fade the div after three seconds and the previous timer (if there was one) is cancelled.

Note: the stop() isn't strictly required here but is recommended when dealing with multiple animations/effects.

Edit: fixed function name typo and updated setTimeout arguments so timeout call works.

回复收藏 0 原文

鱼忆七猫命九 2024-08-24 00:15:02

我正在使用这个并且效果很好：

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

I am using this and it works well:

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

回复收藏 0 原文