jQuery 和 sIFR。悬停时 - 延迟并显示答案

【问题标题】：jQuery and sIFR. On hover - delay and showjQuery 和 sIFR。悬停时 - 延迟并显示
【发布时间】：2009-07-26 13:06:15
【问题描述】：

我正在尝试在将鼠标悬停在 div 上时显示 sIFR 文本，但会有一些延迟。

标记是这样的，几次：

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

        <h6>sIFR Text</h6>

    </div>
</div>

这段代码可以解决问题（从隐藏到悬停时的 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();
            }
    );
});

我尝试使用 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();

                    }
       );

});

你能指出任何替代方案吗？也许 setTimeout 是一个不错的选择，但我以前从未使用过它，我不确定我应该把它放在哪里。

感谢任何提示。

【问题讨论】：

标签： jquery sifr show

【解决方案1】：

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

【讨论】：