圖像隱藏，然後在鼠標移動淡入，淡出和淡入再次

我試圖讓圖像淡出時，沒有鼠標動作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>

非常感謝您的幫助！

來源

2010-02-11 Lozano

我已經用一個全功能於一身的頁面更新了我的答案。希望這會讓事情更清楚。最好在自己的文件中有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>

來源

2010-02-11 22:06:29 user113716

感謝您的幫助帕特里克，但我似乎無法得到那個工作:( – Lozano 2010-02-11 22:19:21

對不起，我沒有抓緊其餘的你有沒有在你的HTML文件中導入jQuery？我會在一分鐘內用更徹底的解決方案更新我的答案。 – user113716 2010-02-11 22:23:06

我很抱歉，我只是無法得到它的工作！它工作嗎？非常感謝您的幫助！:) – Lozano 2010-02-12 12:16:15

試試這個：

$(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) 
    }); 
});

來源

2010-02-11 22:29:01

謝謝本，它似乎沒有工作。你能告訴我你將如何在劇本中展示出來，以確保它不是我這樣的新手！ – Lozano 2010-02-12 12:10:44

而不是使用setTimeout，爲什麼不使用jQuery的.delay（）??? – jhanifen 2010-09-14 18:33:27

圖像隱藏，然後在鼠標移動淡入，淡出和淡入再次

回答

相關問題