Google Maps 使用 jQuery 淡入 InfoBox 内容答案

【问题标题】：Google Maps fade in InfoBox content with jQueryGoogle Maps 使用 jQuery 淡入 InfoBox 内容
【发布时间】：2012-06-24 17:41:11
【问题描述】：

我的地图上有一堆标记，当您将鼠标悬停在每个标记上时，我希望图像淡入。

到目前为止，InfoBox 本身没有显示不可见的背景图像，一旦 InfoBox 打开，jQuery 效果就会应用于图像，但是当我使用相同的鼠标悬停事件显示时，我无法触发效果打开信息框。当我使用带有单独 DOM 侦听器的“单击”事件但由于某种原因鼠标悬停事件不会触发它时，它可以工作。

这是我试图开始工作的代码的 sn-p（其中“.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);
});

使用 'click' 事件来代替单独的 DomListener，但不适用于 mouseover：

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

怎样才能达到想要的效果？

【问题讨论】：

你不能使用 google.maps.event.addDomListener(marker, 'mouseover', function() { ..} );
由于某些奇怪的原因不起作用。我使用了与上面提到的完全相同的代码，只是将“click”这个词替换为“mouseover”，什么都没有！

标签： javascript jquery google-maps-api-3 infowindow

【解决方案1】：

如果你使用 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;}
}

【讨论】：