jquery - 淡入与淡出

Question

我的网站使用了 Google map 。 map 本身应在完全加载后显示。这是 fadeIn() 应该开始将不透明度从 0 增加到 100% 的地方。

出于某种原因，fadeIn() 不执行任何操作，而 fadeTo() 对我有效。 我以前使用过 fadeIn 但从未见过它以这种方式运行 - 也许我盯着文档看的时间太长了。

var map = new google.maps.Map(document.getElementById('map'),
{
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
});

google.maps.event.addListenerOnce(map, 'idle', div_fadein);
// Don't invoke callback on *every* map move

function div_fadein()
{
    $("#map").fadeTo(600, 1);               // <-- Works
    //$("#map").fadeIn(800);                // <-- Doesn't work
}

#map
{
    height: 350px;
    width: 500px;
    border: 1px solid black;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Answer 1

看起来 fadeIn 的工作依赖于 display none 的设置。所以因为动画后的最终结果不是 opacity = 1;你的 div 仍然不可行。

在带有 fadeIn 的动画结束时，显示设置为 block ，这将正确显示您的 div。有什么理由不能使用 fadeTo 吗？