title: Fade in leaflet markers when added
body: <p>My map loads icons from the API while scrolling around.  The delay makes the markers pop into existence, which I don't like visually.  Preferably, they would grow from a pixel to their normal size or fade in.  I figured fade in wouldn't be too hard to do with css3 transitions.  Markers have the method <code>setOpacity(n)</code> so I tried initializing the marker like</p>
  
  <pre><code>@marker = L.marker(
      coordinates,
      {opacity: .1}
  ).on('add', -&gt;
      @setOpacity(1)
  )
  </code></pre>
  
  <p>because I realized adding a marker was async so if I set the opacity too early, the transition wouldn't apply because the marker element wasn't in the DOM and the marker would render at full opacity.  This is why I tried listening to the <code>add</code> event.  But that doesn't work.  apparently the event fires too early.  If i put setOpacity in a timeout, it works fine.  But I do not think that is a good way to write this, especially because it introduces even more delay on top of the API. </p>
  
  <p>How can I fade in my icons?  I think a lot of people want this feature, so maybe it would be a good leaflet plugin.</p>