Image Caché, puis sur le mouvement de la souris Fade-In, Fade-Out et Fade-In à nouveau

J'essaye de faire disparaître une image quand il n'y a pas eu d'action de la souris pendant 3 secondes puis s'estompe lorsque la souris est de nouveau déplacé.Image Caché, puis sur le mouvement de la souris Fade-In, Fade-Out et Fade-In à nouveau

Je serais également reconnaissant si quelqu'un pouvait me dire comment je peux cacher l'image jusqu'à ce que la souris bouge. Ainsi, lorsque la page se charge, vous ne voyez pas l'image tant que la souris ne bouge pas.

C'est ce que j'ai jusqu'à présent ...

<!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>

Merci beaucoup pour votre aide!

Source

2010-02-11 Lozano

J'ai mis à jour ma réponse avec une page tout-en-un. Espérons que cela rendra les choses plus claires. Mieux vaut avoir javascript dans son propre fichier, mais cela vous permettra d'aller.

Assurez-vous que cette ligne:

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

correctement les points à votre fichier jQuery avec le bon emplacement et le nom.

Faites-moi savoir comment ça se passe.

<!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>

Source

2010-02-11 22:06:29 user113716

Merci pour l'aide Patrick l'mais je ne peux pas sembler obtenir que pour travailler :( – Lozano

Désolé, je ne prêtais pas attention au reste de votre Avez-vous jQuery importé dans votre fichier html? Je vais mettre à jour ma réponse avec une solution plus complète dans une minute – user113716

Je suis vraiment désolé, je ne peux pas faire fonctionner ça! ça marche? Merci beaucoup pour votre aide! :) – Lozano

Essayez ceci:

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

Source

2010-02-11 22:29:01

Merci Ben, Cela ne semble pas fonctionner. Pourriez-vous me montrer comment vous présenteriez cela dans un script pour vous assurer que ce n'est pas moi qui suis si novice! – Lozano

au lieu d'utiliser setTimeout, pourquoi ne pas utiliser .delay de jQuery ??? – jhanifen

Image Caché, puis sur le mouvement de la souris Fade-In, Fade-Out et Fade-In à nouveau

Répondre

Questions connexes