Fade after SVG fill color animation

Question

I am trying to make a simple svg checkbox animation.

<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/>
   <path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg> 

This is a circle with a flag inside it. I am trying to animate the fill property for a circle. Search tells me that

$('.circle').on("click", function() { 
    $(this).animate({fill : 'green'});
});

will not work because vanilla jQuery does not support animations fillfor SVG. However, the function cssworks:

$('.circle').on("click", function() { 
  $(this).css({fill : 'green', transition: "2.0s"});
});

I want to output all svg after the animation is complete, but cssdoes not have a callback! I am forced to basically crack a 2 second jump using a function delay:

$('.circle').on("click", function() { 
  $(this).css({fill : 'green', transition: "2.0s"});
  $(".checkbox").delay(2000).fadeOut('fast'); 
});

Is there a more elegant way to do this? I don't want to include the new javascript library just to elegantly fade it out.

Answer 1

, transitionend:

function fillGreen() {
  $(this).css({fill : 'green', transition: "2.0s"});
}

function fadeoutCheckbox() {
  $(".checkbox").fadeOut('fast'); 
}

$('.circle')
  .one('click', fillGreen)
  .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', fadeoutCheckbox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/>
   <path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>

Hide result

Answer 2

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Hide result

,