我试图让图像在3秒内没有鼠标动作时淡出,然后再次移动鼠标时淡入.
如果有人能告诉我如何在鼠标移动之前隐藏图像,我也会感激不尽.因此,当页面加载时,在鼠标移动之前您不会看到图像.
这就是我到目前为止……
<!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>
非常感谢你的帮助！
解决方法:
我用一个多功能的页面更新了我的答案.希望这会使事情变得更加清晰.最好在自己的文件中使用javascript,但这样可以帮助你.
确保这一行：
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
使用正确的位置和名称正确指向您的jQuery文件.
让我知道事情的后续.
<!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>