0

http://jsfiddle.net/builtbymay/Wge4n/4/で、Basecampの召喚状ボタンの上にマウスを置き、ブラウザウィンドウの左側にマウスを移動します。1000msの遅延の後、見出しが元に戻ることに気付くでしょう。良い！ここでもう一度マウスを置きますが、今回はマウスをHighriseの上に移動します。よくない！

Basecampボタンにマウスを合わせるときに発生する遅延を高速化する必要があると考えています。clearTimeoutが機能しませんでした。どんな助けでもいただければ幸いです。ありがとう！

$(document).ready(function() {
    var delay = 1000;
    $('.products .bc').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.bc:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        // Added bc:first to prevent styles being added to other .bc classes.
        $('.bc:first h1, .bc:first p').css('padding', '18px 0 0');
        // Adjusting vertical layout so red arrow more closely matches location on 37signals.com.  
        $('.bc:last').css('box-shadow', '0 0 10px #333');
    });
    $('.products .bc').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.bc:first').addClass('hidden').removeAttr('style');
            $('.bc:last').removeAttr('style');
        }, delay);
    });
    $('.products .hr').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.hr:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        $('.hr:first h1, .hr:first p').css('padding', '18px 0 0');
        $('.hr:last').css('box-shadow', '0 0 10px #333');
        $('.right-arrow-b').removeClass('right-arrow-b').css({
            'left': '80px',
            'position': 'relative',
            'z-index': '1'
        });
    });
    $('.products .hr').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.hr:first').addClass('hidden').removeAttr('style');
            $('.hr:last').removeAttr('style');
            $('.right-arrow-b').addClass('right-arrow-b').removeAttr('style');
        }, delay);
    });
    $('.products .cf').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.cf:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        $('.cf:first h1, .cf:first p').css('padding', '18px 0 0');
        $('.cf:last').css('box-shadow', '0 0 10px #333');
        $('.left-arrow').removeClass('left-arrow').css({
            'left': '150px',
            'position': 'relative',
            'z-index': '1'
        });
    });
    $('.products .cf').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.cf:first').addClass('hidden').removeAttr('style');
            $('.cf:last').removeAttr('style');
            $('.left-arrow').addClass('left-arrow').removeAttr('style');
        }, delay);
    });
});

参考：CSSとHTMLは別のクラスメートから借りたものです。私の仕事は、プロセスでHTMLとCSSを編集せずに、37signals.comの動作を反映するように動作を取得することでした。多くのcss操作が発生しています。無視してください。私の最後のタスクは、上記の問題を解決することです。ありがとう！

4

2 に答える 2

0

このフィドルを試してください。イベントの機能を実行する別の機能を作成しましたmouseleave。1 つのボタンをオンmouseenterにすると、他の 2 つのボタンの機能が実行されmouseleaveます。さらに、の ID の配列を保持していsetTimeoutます。また、前述の関数では、すべてのタイマーもクリアしています。

于 2013-03-10T10:15:05.960 に答える
0

タイマーを保持するグローバル変数を定義します

var globalTimer = null;

の上では$(document).ready(function() ...、この var がメソッド内で定義されていないことが重要です。

次に、この変数にタイムアウトを割り当て、設定されているかどうか、およびすべてのメソッドでクリアする必要があるかどうかを確認します。

if(gloabalTimer != null) window.clearTimeout(gloabalTimer);
globalTimer = window.setTimeout(function() {
    //Your actions
}), delay);
于 2013-03-10T01:50:58.500 に答える