title: Fade out after animating SVG fill color
body: <p>I'm trying to do an animation of a simple svg checkbox. </p>
  
  <pre><code>&lt;svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
     &lt;circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/&gt;
     &lt;path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/&gt;
  &lt;/svg&gt; 
  </code></pre>
  
  <p>This is a circle, with a checkbox inside it. I'm trying to animate the 'fill' property of the circle. <a href="https://stackoverflow.com/a/25104648/1465472">Searching stack overflow</a> tells me that </p>
  
  <pre><code>$('.circle').on("click", function() { 
      $(this).animate({fill : 'green'});
  });
  </code></pre>
  
  <p>will not work because vanilla jQuery does not support animating <code>fill</code> for SVGs. However, the <code>css</code> function does work:</p>
  
  <pre><code>$('.circle').on("click", function() { 
    $(this).css({fill : 'green', transition: "2.0s"});
  });
  </code></pre>
  
  <p>I want to fade the entire svg out after the animation is completed, but <code>css</code> has no callback! I'm forced to basically hack around the 2 second transition with the <code>delay</code> function:</p>
  
  <pre><code>$('.circle').on("click", function() { 
    $(this).css({fill : 'green', transition: "2.0s"});
    $(".checkbox").delay(2000).fadeOut('fast'); 
  });
  </code></pre>
  
  <p>Is there any more graceful way to do this? I'm reluctant to include a new javascript library just for the purpose of fading this out elegantly. </p>