Font-Awesome - icon-spin does not spin when hidden and then displayed

Question

When my page loads, I hide the icon-refresh + icon-spin icon by setting its display property to none.

Now, after some action is performed, I wish to display this icon. I invoke jQuery's .show() method on the icon. However, while the icon is shown, the icon is not spinning anymore.

If I load it without hiding it initially, it spins. But not when it is hidden and displayed later.

EDIT: If it was not clear from the title, I am using Font Awesome to display the icons

Answer 1

You have to use $element.css("display","inline-block"); instead of .show();

Answer 2

Old topic, but I had similar issue with "fa-spin" not working after the containing element was hidden with { visibility: hidden }, set with jQuery. There was also some other animation involve, which was probably causing timing issues, etc.

The fix was to set an event on the containing element to fire on making it visible again, which fired this function:

ply_obj.container.on(
            'controlsshown',
            function () {

                if (ply_obj.config.loop_tf) {
                    ply_obj.loop_icon.removeClass('fa-spin');
                    setTimeout(function () { ply_obj.loop_icon.addClass('fa-spin'); }, 100);
                }
            }
        );

So removing the "fa-spin", then adding it back with a small delay made it work as desired for me.