Font-Awesome - 图标旋转在隐藏然后显示时不旋转

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.

Answer 3

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

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

and my spinner spins on subsequent calls

HTH

Swampy

Answer 4

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. Eg:

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