0

我试图在将鼠标悬停在 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 是一个不错的选择，但我以前从未使用过它，而且我不确定我应该把它放在哪里。

感谢您的任何提示。

4

1 回答 1

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();
                }
        );
});
于 2009-07-26T13:24:22.643 回答