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

This seems to work for me: http://jsfiddle.net/RXkwq/ (JSFiddle WebFont issues not withstanding) — Jason Sperske, Apr 11 '13 at 20:13
I've got the same problem. Only occurs in Firefox 35. The answer below didn't solve it for me — totas, Feb 02 '15 at 15:31

score 29 · Answer 1 · answered Jul 01 '13 at 11:26

29

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

answered Jul 01 '13 at 11:26

Stefan Pöltl

362
3
9

This fixes it in Safari and Firefox for me. It was previously working in Chrome. I've not tested anything else yet… – Graham Ashton Mar 19 '15 at 15:13
in case anyone wondering `.show()` sets `display:inline` which does not support css transform. see http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – wal May 19 '17 at 00:32

score 1 · Answer 2 · answered Dec 04 '15 at 16:18

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.

SwampyFox · Answer 3 · 2013-05-27T13:03:58.650

0

Are you calling "$('#mySpinnerElement').hide()?

I changed that to document.getElementById('mySpinnerElement').style.display = 'none';

and my spinner spins on subsequent calls

HTH

Swampy

edited May 27 '13 at 13:03

answered May 27 '13 at 12:08

SwampyFox

1,105
9
13

score 0 · Answer 4 · answered Mar 03 '14 at 10:37

Seems that IE10 does not run the spin animation if the initial display state is none. I found that dynamically changing the display to inline-block did not trigger the spin animation. Moving the spinner off-screen solved the problem. E.g:

.icon-spinner {
    position: absolute;
    left: -9999px;
}
.is-pending .icon-spinner {
    left: 0;
}

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

4 Answers4