jQuery和sIFR。在懸停 - 延遲和顯示

[英]jQuery and sIFR. On hover - delay and show


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

我正在嘗試將鼠標懸停在div上時出現sIFR文本,但有一些延遲。

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 :

這段代碼正在做的伎倆(從懸停到隱藏的sIFR),但沒有延遲:

$(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 :

我嘗試使用hoverIntent插件,加載它,並像這樣使用它,但它似乎不起作用:

$(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.

你能指出任何替代方案嗎?也許setTimeout是一個很好的選擇,但我以前用過它,我不確定我應該把它放在哪里。

Thanks for any tip.

謝謝你的提示。

1 个解决方案

#1


You could use setTimeout.

你可以使用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();
                }
        );
});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/07/26/721167bf18d252cd8e1a98fbaa9f4836.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com