• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:mmmoustache 5次浏览

我在地图上有一堆标记,我希望每当你将鼠标悬停在每个标记上时,图像都会淡入。谷歌地图淡入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;} 
} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)