hide rect with animation

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<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>
                body {
        font-family: sans-serif;
        font-size: small;
        margin: 0;
    }

    #map {
        height: 350px;
        width: 100%;
    }

    li {
        margin: 10px;
        cursor: pointer;
        list-style: none;
    }

            #tag {
                width: 100px;
                margin: 3px;
            }


</style>
<!-- End styling the map  -->

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
// currrently the map becomes unresponsive whne this is inserted
//
//	    var myAGSLayer
           
	   // define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

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

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

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