jQuery und sIFR. Auf schweben - Verzögerung und Show

Question

Ich versuche, einen sIFR Text erscheint zu machen, wenn auf einem div mit einiger Verzögerung schwebt.

Das Markup so ist, mehrmals:

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

        <h6>sIFR Text</h6>

    </div>
</div>

Dieser Code macht den Trick (von Verstecken sIFR auf schweben), jedoch ohne Verzögerung:

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

Ich habe versucht, das hoverIntent Plugin zu verwenden, laden sie, und es so verwendet wird, aber es scheint nicht zu arbeiten:

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

                    }
       );

});

Können Sie eine Alternative hinweisen? Vielleicht SetTimeout ist eine gute Alternative, aber ich Neve es vorher benutzt, und ich bin nicht wirklich sicher, wo soll ich es sagen.

Danke für jeden Tipp.

Answer 1

Sie könnten setTimeout verwenden.

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