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 に答える