功能上的jquery延迟

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

您可以在fade*调用之前使用delay()函数，或者将所有内容全部包装到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);