画像隠し、その後、マウスの動きフェードイン、フェードアウトとフェードインで再び
-
20-09-2019 - |
質問
私は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>
他のヒント
これを試してください:
$(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)
});
});
所属していません StackOverflow