Question

您好我为一个简单的淡入淡出菜单编写了两个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');
    }
});

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

Answer 1

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

Answer 2

你可以逃脱：

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);

Jquery延迟功能

2 个答案: