jQuery and sIFR. On hover - delay and show

Question

Hello guys,

I'm trying to make a sIFR text appears when hovering on a div, with some delay.

The markup is like this, several times :

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

     <h6>sIFR Text</h6>

    </div>
</div>

This code is doing the trick (from hide to sIFR on hover), but without delay :

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

I tried to use the hoverIntent plugin, loading it, and using it like this, but it doesn't seems to work :

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

                    }
       );

});

Can you point out any alternative ? Maybe setTimeout is a good alternative, but I neve used it before, and I'm not really sure where should I put it.

Thanks for any tip.

Answer 1

You could use 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();
                }
        );
});