功能上的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);