功能上的jquery延迟
问题描述:
嗨我写了一个简单的淡入淡出菜单的两个jquery函数,它基本上分裂了一半的屏幕,并允许你去两个网站之一。在这些功能工作之前,如何设置延迟时间2秒?这里是我的代码:功能上的jquery延迟
$('#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');
}
});
难道我莫名其妙地在另一个函数包装吗?
答
您可以在fade*
调用之前使用delay()
函数,或者将所有内容全部包装到setTimeout
JS定时器中。
答
你可以逃脱:
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);