1

マップ上にたくさんのマーカーがあります。各マーカーにカーソルを合わせると、画像がフェードインします。

これまでのところ、InfoBox自体には非表示に見える背景画像がなく、InfoBoxを開くとjQuery効果が画像に適用されますが、同じマウスオーバーイベントを使用してInfoBoxを開いた状態で表示すると、効果をトリガーできません。 。別のDOMリスナーで「クリック」イベントを使用すると機能しますが、何らかの理由でマウスオーバーイベントがトリガーされません。

これが私が動作させようとしているコードのスニペットです（「.hello」は「opacity：0」に設定されています）：

var infoBox = new InfoBox({myLatlng: marker.getPosition(), map: map}); 

google.maps.event.addListener(marker, 'mouseover', function (){
    infoBox.open(map, this);
    infoBox.setContent('<div id="content"><img class="hello" src="css/images/office.png" alt="" /></div>');
    $(".hello").animate({opacity: 1},200);
});

代わりに「クリック」イベントを使用すると、別のDomListenerで機能しますが、マウスオーバーでは機能しません。

google.maps.event.addDomListener(marker, 'click', function() {
    $(".hello").animate({opacity: 1},200);
});

どうすれば目的の効果を達成できますか？

4

1 に答える 1

1

css3アニメーションを使用している場合、インフォボックスでフェードインできます。

.infoBox {
-webkit-animation: fadeIn 300ms; /* Chrome, Safari, Opera */
animation: fadeIn 300ms;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
于 2014-06-16T08:52:22.957 に答える