0

在http://jsfiddle.net/builtbymay/Wge4n/4/上，将鼠标悬停在 Basecamp 号召性用语按钮上，然后将鼠标移动到浏览器窗口的左侧。您会注意到航向会在 1000 毫秒延迟后变回来。好的！现在再次将鼠标悬停在它上面，但这次将鼠标移到 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 是从另一个同学那里借来的。我的任务是让行为反映 37signals.com 上的行为，而无需在此过程中编辑任何 HTML 和 CSS。发生了很多 css 操作——忽略它。我的最后一项任务是解决上述问题。谢谢！

4

2 回答 2

0

定义一个保存定时器的全局变量

var globalTimer = null;

在 之上$(document).ready(function() ...，重要的是这个 var 不是在方法中定义的。

现在将超时分配给这个 var 并检查它是否设置以及是否需要在所有方法中清除它。

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

试试这个小提琴。我做了一个单独的函数来执行mouseleave事件的功能。一个按钮的打开mouseenter执行mouseleave其他 2 个按钮的功能。此外，我保留了一组setTimeout. 在前面提到的功能中，我还清除了所有计时器。

于 2013-03-10T10:15:05.960 回答