Adding fade in effect to intl-tel-input plugin

Question

tel-input plugin from Jack O'connor

https://github.com/Bluefieldscom/intl-tel-input

And I notice the flags take about a second to download, I want to smooth this with a fade in effect.

Can anyone suggest a way to do this?

Answer 1

Turns out it's just a few extra lines of jQuery:

var selectedFlag = $(".intl-tel-input .selected-flag .flag");
selectedFlag.hide();
$('<img/>').attr('src', '/path/to/flags.png').load(function() {
   $(this).remove(); // prevent memory leaks
   selectedFlag.fadeIn(2000);
});

Demo here: http://codepen.io/jackocnr/pen/gLKtf

(Image caching technique from https://stackoverflow.com/a/5058336/217866)