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 に答える