传单地图:3秒后淡出的长方形

Question

在我的传单地图中，我使用绑定函数放大到某个区域。当地图放大时，由坐标形成一个矩形.

示例

http://jsfiddle.net/PHDduggs/u1nqwe9s/4/

是要让长方形在3秒后褪色吗？

谢谢

javascript页面

        // set urls for maps
    var oceans = new L.TileLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}.png");




    /// location of map load
    var map = L.map('map', {
        center: [53.01478, -10.34157],
        zoom: 4,
        layers: [oceans],
        detectRetina: true,
        minZoom:4


    });

    //add map tp the baselayer group
    var baseLayers = {
        "Oceans": oceans,



    };

    L.control.layers(baseLayers).addTo(map);


// add real map of ireland to the map from marine servers

   // define rectangle geographical bounds
 var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// create an orange rectangle
  L.rectangle(bounds, { weight: 1.0, color:  "blue", fill:"True" }).addTo(map);


// zoom the map to the rectangle bounds
 map.fitBounds(bounds);

HTML页面

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>  
<div class="dark" runat="server" id="map" style="width: 100%; height: 400px; border:1px solid black;" ></div>

CSS页面

<style>

    #tag {
        width: 100px;
        margin: 3px;
    }
</style>

Answer 1

这里有一种可能性(使用jQuery)

将类添加到矩形中

// create an orange rectangle
var rect = L.rectangle(bounds, { weight: 1.0, color:  "blue", fill:"True", className: "auto_hide" });
rect.addTo(map);

缩放地图后，添加3秒超时并淡出矩形(请注意，矩形将不可见，但仍在那里)

// wait for 3sec to hide rectangle smoothly
setTimeout(function(){
    $(".auto_hide").animate({ opacity: 0 }, 500, function() {
       // Animation complete.
  });
}, 3000);

下面是一个例子：http://jsfiddle.net/FranceImage/pc9r2s35/