Javascript 图像隐藏，然后在鼠标移动时淡入、淡出和再次淡入
我试图让图像在3秒钟内没有鼠标动作时淡出，然后在再次移动鼠标时淡入 如果有人能告诉我如何在鼠标移动之前隐藏图像，我也会非常感激。因此，当页面加载时，直到鼠标移动，您才会看到图像 这就是我目前所拥有的Javascript 图像隐藏，然后在鼠标移动时淡入、淡出和再次淡入,javascript,jquery,fadein,fadeout,mousemove,Javascript,Jquery,Fadein,Fadeout,Mousemove,我试图让图像在3秒钟内没有鼠标动作时淡出，然后在再次移动鼠标时淡入 如果有人能告诉我如何在鼠标移动之前隐藏图像，我也会非常感激。因此，当页面加载时，直到鼠标移动，您才会看到图像 这就是我目前所拥有的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top:visible').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut()
}, 3000)
})
</script>
</head>
<body>
<div id="top">
<img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>
无功定时器；
$（文档）.mousemove（函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=0；
}
$（“#顶部：可见”）.fadeIn（）；
计时器=设置超时（函数（）{
$（“#顶部”）.fadeOut（）
}, 3000)
})
非常感谢你的帮助 我已经用一个多功能页面更新了我的答案。希望这能让事情变得更清楚。最好在自己的文件中包含javascript，但这会让您继续 确保该行：
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>tester page</title>
<style>
<!--
-->
</style>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $top = $('#top');
var $document = $(document);
var timer = null;
var timerIsRunning = false;
$top.hide();
$('#menu').mousemove(function(e){
e.stopPropagation();
});
setTimeout(function() {
$document.mousemove(function(e) {
if($top.is(':hidden')) {
$top.fadeIn();
} else {
if(!timerIsRunning) {
timerIsRunning = true;
clearTimeout(timer);
timer = setTimeout(function() { $top.fadeOut(); }, 5000);
setTimeout(function() {timerIsRunning = false;}, 2000);
}
}
});
}, 500);
});
</script>
</head>
<body>
<div id="top">
<img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>
测试页面
$（文档）.ready（函数（）{
变量$top=$（'#top'）；
var$document=$（文档）；
var定时器=null；
var timerIsRunning=false；
$top.hide（）；
$（“#菜单”）.mousemove（函数（e）{
e、 停止传播（）；
});
setTimeout（函数（）{
$document.mousemove（函数（e）{
如果（$top.is（':hidden'））{
$top.fadeIn（）；
}否则{
如果（！timerIsRunning）{
timerIsRunning=true；
清除超时（计时器）；
timer=setTimeout（函数（）{$top.fadeOut（）；}，5000）；
setTimeout（函数（）{timerIsRunning=false；}，2000）；
}
}
});
}, 500);
});
$(document).ready(function() {
var timer;
// hide initially
$('#top').hide();
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut();
}, 3000)
});
});
谢谢你的帮助，帕特里克，但我似乎没法做到：（很抱歉，我没有密切注意您的其余代码。您的html文件中是否导入了jQuery？我将在一分钟内用更彻底的解决方案更新我的答案。非常抱歉，我无法使其工作！您尝试过并使其工作了吗？非常感谢您的帮助！：）你好，劳伦斯。我确实看到我把
toptop\u mailingvar$top=$（“#top”）