0

这是小提琴:http: //jsfiddle.net/e5ana/9/

有 5 个场景,默认场景随页面一起加载。将鼠标悬停在地图上的图钉上,场景就会发生变化。在实际站点中,黑色区域隐藏了额外的场景。

这是其中一个场景的代码:

    $("a.dt").mouseenter(function(){
    $(".town").filter(':not(:animated)').animate({
    bottom: '0px'
  }, 500);
    $("#dt").animate({
    bottom: '126px'
  }, 500);
});

我被困的地方是......

如果十秒后没有悬停任何图钉,我希望任何可见的场景都向下动画,并且我希望默认场景 (id="dt") 向上动画。

当我将超时代码添加到每个 mouseenter 函数时,我接近了,但默认场景似乎卡住了动画。换句话说,即使它有一个“城镇”类,在另一个引脚上的 mouseenter 也未能降低默认场景。

这是我正在尝试的超时代码:

var t;
var del = 10000; //Ms delay 
    $(document).mousemove(function(){
    clearTimeout(t);
    var t = setTimeout(function(){
        //If the mouse is not moved
        $(".town").animate({
            bottom: '0px'
        }, 500);
        $("#dt").animate({
            bottom: '126px'
        }, 500);
    }, del);
});

我错过了什么?

======================

因此,正如我在下面评论的那样,消除重复的全局“var t”可以正常工作。谢谢!

现在我试图只在默认场景被隐藏时运行代码。这是因为如果默认场景是可见的,代码就会运行,它会为该场景设置动画并再次备份。

这就是我正在尝试的...

if ($('#dt').css('bottom') == '0px') {
var t;
var del = 10000; //Ms delay 
    $(document).mousemove(function(){
    clearTimeout(t);
    t = setTimeout(function(){
        //If the mouse is not moved
        $(".town").animate({
            bottom: '0px'
        }, 500);
        $("#dt").animate({
            bottom: '126px'
        }, 500);
    }, del);
});
}

但它不起作用。不会引发脚本错误,场景也不会发生任何事情。

在http://jsfiddle.net/webguy262/e5ana/18/更新小提琴

4

0 回答 0