Question

当我的网页加载时，我通过将icon-refresh + icon-spin属性设置为无来隐藏display图标。

现在，在执行某些操作后，我希望显示此图标。我在图标上调用了jQuery的.show()方法。但是，显示图标时，图标不再旋转。

如果我加载它而不是最初隐藏它，它会旋转。但不是在以后隐藏和显示它。

编辑：如果标题中不清楚，我使用Font Awesome来显示图标

Answer 1

您必须使用$element.css("display","inline-block");代替.show();

Answer 2

旧话题，但是在使用jQuery设置{visibility：hidden}隐藏了包含元素之后，我遇到了类似的问题，“fa-spin”无效。还有一些其他动画涉及，这可能导致时间问题等。

解决方法是在包含元素上设置一个事件，以便再次使其可见，从而触发此函数：

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);
                }
            }
        );

因此删除“fa-spin”，然后稍微延迟添加它使它按照我的需要工作。

Answer 3

你在调用“$（'＃mySpinnerElement'）。hide（）？

我将其更改为document.getElementById（'mySpinnerElement'）。style.display ='none';

我的微调器在随后的调用中旋转

HTH

沼泽

Answer 4

如果初始显示状态为none，IE10似乎不会运行旋转动画。我发现动态地将显示更改为inline-block并未触发旋转动画。将微调器移出屏幕解决了这个问题。 E.g：

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

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

4 个答案: