0

我们让开发人员为我们制作了一段 javascript，用于在地图上设置动画标记。请参阅http://luniablue.com/clients/endowment了解它的当前状态。

我遇到的问题是翻转过于敏感，我希望在执行翻转功能之前有 1 秒的暂停。根据我的阅读，我需要声明一个 setTimeout() 函数，但我不清楚在哪里插入它。

我已经尝试了所有可以看到的地方，但除了破坏脚本之外我没有运气。我敢肯定这很简单，但 javascript 不是我的强项。谁能帮我吗？

这是代码：

var firstEntry = true;
var lastOn = '';

function showAllPins() {
    if ($('#communities').hasClass('theMouseIsOff')) {
        var citiesArr = [];
        $('.pin').each( function () { 
            citiesArr.push(this.id);
            $('#'+this.id).hide();
        });
        var stillHidden = citiesArr.length;
        while (stillHidden > 0) {
            var a = Math.floor(Math.random()*citiesArr.length);
            if ($('#'+citiesArr[a]).is(':hidden')) {
                $('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
                    opacity: 1,
                    top: '+=40',
                }, Math.floor(Math.random()*900), 'easeOutBounce');
                stillHidden--;
            }
        }
        firstEntry = true;
        $('#communities').removeClass('theMouseIsOff');
    }
}
function showPin(relid){
    lastOn = relid;
    if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
    if (firstEntry == true) {
        $("#communities div[id!=" + relid + "].pin").animate({
            opacity: 0,
            top: '-=40',
        }, 500);
        firstEntry = false;
    } else {
        $("#communities div[id=" + relid + "].pin").animate({
            opacity: 1,
            top: '+=40',
        }, 500, 'easeOutBounce');
    }
}
function removeLastPin() {
    $('#communities').addClass('theMouseIsOff');
    $("#communities div[id=" + lastOn + "].pin").animate({
        opacity: 0,
        top: '-=40',
    }, 500);
    setTimeout('showAllPins()',600);
}

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        showPin(relid);
    }).mouseleave( function () { removeLastPin() });
});

$(document).ready(function() {
    $('.pin').each(function() {
         var selector = '#' + $(this).data('tooltip-id');
         Tipped.create(this, $(selector)[0], { skin: 'light', hook: { target: 'topmiddle', tooltip: 'bottomleft'}});
        });
});
4

1 回答 1

0

你在哪里看到：

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        showPin(relid);
    }).mouseleave( function () { removeLastPin() });
});

您可以将其更改为：

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        setTimeout(function(){showPin(relid)}, 1000);
    }).mouseleave( function () { removeLastPin() });
});

通过更改showPin()函数以在超时后执行，引脚应在指定的时间间隔后出现。

更新：

如果您希望该函数仅在指定的时间间隔内没有发生 mouseleave 时运行，您可以像这样清除 mouseleave 的时间间隔：

$(document).ready(function() {
    $('.pin').mouseenter(function() {
        relid = $(this).attr('rel');
        var awaiting = setTimeout(function() {
            showPin(relid)
        }, 1000);
    }).mouseleave(function() {    
        removeLastPin();
        clearInterval(awaiting);
    });
});
于 2012-06-21T22:51:24.163 回答