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

使用 'click' 事件可以与单独的 DomListener 一起使用，但不能与 mouseover 一起使用：

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

我怎样才能达到预期的效果？

4

1 回答 1

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;}
}
于 2014-06-16T08:52:22.957 回答