我正在尝试使用JavaScript和jQuery创建一个移动面板。
我做了这个Working Demo,JS部分看起来像这样:
$("nav.nav").hover(function(){
$("nav.nav").animate({left:'-5px'},100,"swing");
},
function(){
$("nav.nav").animate({left:'-170px'},100,"swing");
});
正如你所看到的,它正在工作,但我想在离开面板时添加一个延迟,因为有一段时间,我错误地将面板留下1个像素,这很烦人。
我尝试使用setTimeout("javascript function", milliseconds);
,如此:
$("nav.nav").hover(function(){
$("nav.nav").animate({left:'-5px'},100,"swing");
}, setTimeout(function(){
$("nav.nav").animate({left:'-170px'},100,"swing");
},10));
(超时中的回调函数)但它不起作用,我不明白为什么。
答案 0 :(得分:7)
您需要使用悬停输出功能中的功能,如此
var tOut = null;
$("nav.nav").hover(function () {
clearTimeout(tOut); //Clear timout so it doesn't animate back when hovering
$("nav.nav").animate({
left: '-5px'
}, 100, "swing");
},function () {
tOut = setTimeout(function () {
$("nav.nav").animate({
left: '-170px'
}, 100, "swing");
}, 1000);
});
答案 1 :(得分:5)
我建议使用jQuery的.delay()
(结合.stop(true)
)自动处理计时器内容:
$("nav.nav").hover(function () {
$("nav.nav").stop(true).animate({left: '-5px'}, 100, "swing");
},function () {
$("nav.nav").stop(true).delay(1000).animate({left: '-170px'}, 100, "swing");
});