jQuery et sIFR. Sur hover - retarder et montrer

Question

J'essaye de faire un texte sIFR apparaît en planant sur un div, avec un peu de retard.

Le balisage est comme ça, à plusieurs reprises:

<div class="box"> 
    <div class="text"> 

     <h6>sIFR Text</h6> 

    </div> 
</div> 

Ce code fait le tour (de cacher à sIFR sur le vol stationnaire), mais sans délai:

$(document).ready(function() {  

     $('.text').hide(); 

     $('.box').mouseover(

     function() { 

       $(this).children('.text').show(); 

       //sIFR code : 
        sIFR.replace(rockwell, { 
          selector: 'h6', 
         css: [ 
          '.sIFR-root { color:#FFFFFF; font-size: 1.2em; text-transform: uppercase }', 
          'a {color: #333333; text-decoration: none;}', 
          'a:hover {color: #333333;text-decoration:underline;}' 
          ], wmode: "transparent" 
        } 
        ); //sIFR ends 

     }); 



     $('.box').mouseout(

     function() { 
       $(this).children('.text').hide(); 
      } 
    ); 
}); 

j'ai essayé d'utiliser le plugin hoverIntent, le charger et l'utiliser comme ça, mais il ne semble fonctionner:

$(document).ready(function() {   

     $('.text').hide(); 

     $('.box').hoverIntent(

       function() { 

        $(this).children('.text').show(); 

     //sIFR code should go here 
        sIFR.replace(rockwell, { 
          selector: 'h6', 
         css: [ 
          '.sIFR-root { color:#FFFFFF; font-size: 1.2em; text-transform: uppercase }', 
          'a {color: #333333; text-decoration: none;}', 
          'a:hover {color: #333333;text-decoration:underline;}' 
          ], wmode: "transparent" 
        } 
        ); //sIFR ends 

       }, 

       function(){ 

        $(this).children('.text').hide(); 

        } 
     ); 

}); 

Pouvez-vous signaler toute alternative? Peut-être que setTimeout est une bonne alternative, mais je ne l'ai jamais utilisé auparavant, et je ne suis pas vraiment sûr de l'endroit où je devrais le mettre.

Merci pour tout conseil.

Answer 1

Vous pouvez utiliser setTimeout.

$(document).ready(function() {   

     //delcare a variable to hold the timeout 
     var to; 

     $('.text').hide(); 

     $('.box').mouseover(

       function() { 

        $(this).children('.text').show(); 

        // do sIFR code after 1000 milliseconds 
        to = setTimeout(function() { /* sIFR code goes here */ }, 1000); 

       }); 



     $('.box').mouseout(

       function() { 
         // If mouseout happens before the delay ends 
         // you probably don't want sIFR code to run. 
         clearTimeout(to); 


         $(this).children('.text').hide(); 
       } 
     ); 
});