Jquery延迟功能答案

【问题标题】：Jquery delay on functionJquery延迟功能
【发布时间】：2011-05-02 10:24:12
【问题描述】：

您好，我为一个简单的淡入淡出菜单编写了两个 jquery 函数，它基本上将屏幕分成两半并允许您转到两个站点之一。如何在这些功能起作用之前设置 2 秒的延迟？这是我的代码：

$('#retailNav').bind({
    mouseenter: function() {
        $('#retailFull:not(:animated)').fadeIn('slow');
        $('#residentialNav:not(:animated)').fadeOut('slow');
    },
    mouseleave: function() {
        $('#retailFull').fadeOut('slow');
        $('#residentialNav').fadeIn('slow');
    }
});
$('#residentialNav').bind({
    mouseenter: function() {
        $('#retailHalf:not(:animated)').fadeOut('slow');
        $('#retailNav:not(:animated)').fadeOut('slow');
        $('#residentialFull p').html('Click to enter residential');
    },
    mouseleave: function() {
        $('#retailHalf').fadeIn('slow');
        $('#retailNav').fadeIn('slow');
        $('#residentialFull p').html('Residential');
    }
});

我是否以某种方式将它们包装在另一个函数中？

【问题讨论】：

标签： jquery function delay

【解决方案1】：

你可以逃脱：

function thisFunction() {
    $('#retailNav').bind({
        mouseenter: function() {
            $('#retailFull:not(:animated)').fadeIn('slow');
            $('#residentialNav:not(:animated)').fadeOut('slow');
        },
        mouseleave: function() {
            $('#retailFull').fadeOut('slow');
            $('#residentialNav').fadeIn('slow');
        }
    });
    $('#residentialNav').bind({
        mouseenter: function() {
            $('#retailHalf:not(:animated)').fadeOut('slow');
            $('#retailNav:not(:animated)').fadeOut('slow');
            $('#residentialFull p').html('Click to enter residential');
        },
        mouseleave: function() {
            $('#retailHalf').fadeIn('slow');
            $('#retailNav').fadeIn('slow');
            $('#residentialFull p').html('Residential');
        }
    });
}

setTimeout(thisFunction(), 2000);

【讨论】：

【解决方案2】：

您可以在 fade* 调用之前使用 delay() 函数，或者将所有内容包装到 setTimeout JS 计时器中。

【讨论】：