Jquery delay on function

Hi I written a two jquery functions for a simple fading menu, it basically splits the screen in half and allows you go to one of two sites. How can I set a delay of say 2 seconds before these function work? Here's my code:

$('#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');
        $('#resi开发者_高级运维dentialFull p').html('Click to enter residential');
    },
    mouseleave: function() {
        $('#retailHalf').fadeIn('slow');
        $('#retailNav').fadeIn('slow');
        $('#residentialFull p').html('Residential');
    }
});

Do I have somehow wrap these in another function?

You can use delay() function before your fade* calls or just wraps everything into setTimeout JS timer.

You could get away with:

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