谷歌地图淡入InfoBox与jQuery的内容

  • Z时代
  • 2024-01-10
  • 分类：问答

我在地图上有一堆标记，我希望每当你将鼠标悬停在每个标记上时，图像都会淡入。谷歌地图淡入InfoBox与jQuery的内容

到目前为止，InfoBox本身没有背景图像，看起来不可见，并且一旦InfoBox被打开，jQuery效果就被应用到图像上，但是当我使用相同的mouseover事件时，我无法获得要触发的效果显示打开信息框。它在我使用单独的DOM监听器使用'click'事件时起作用，但由于某种原因，mouseover事件不会触发它。

这里的代码，我试图去上班（其中“.hello”设置为‘不透明度：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); 
});

使用‘click’事件，而不是与工作一个单独的DomListener，但不适用于鼠标悬停：

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

我该如何达到预期效果？

回答：

如果您使用可以淡入信息框的css3动画，则只能使用css来完成此操作。

.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;} 
}

以上是 谷歌地图淡入InfoBox与jQuery的内容 的全部内容， 来源链接： utcz.com/qa/260240.html

回到顶部