javascript - 如何开始旋转一个 bootstrap Font Awesome 图标，然后使用 jQuery 让它停止

Question

我正在处理的网页上有很棒的字体刷新图标。

<i class="fa fa-refresh fa-3x" id="lock-refresh"></i>

单击此图标时，我希望它开始旋转。我已经能够通过在我的 JavaScript 文件中输入以下内容来完成此操作:

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' ).

    //Below is a function that I need to run after the FA icon is clicked.
    startup();
});

不过，我只需要让这个图标旋转几秒钟。我试图将此(如下)添加到我的 JS 文件中，但是当我这样做时图标根本不旋转:

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );

    //Trying to remove the class after 1000 milliseconds. Not working.
    $( this ).delay(1000).removeClass( 'fa-spin' );
    startup();
});

我也尝试过以下方法，但效果不佳:

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' ).delay(1000).removeClass( 'fa-spin' );
    startup();
});

我也尝试了以下方法，但是当我这样做时图标开始旋转但不会停止:

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );

    //Trying to use setTimeout, but doesn't seem to work either.
    setTimeout(function() { $( this ).removeClass( 'fa-spin' ); }, 1000);
    startup();
});

我已经在没有 startup() 函数的情况下尝试了上述所有方法，并且它产生了相同的结果，所以我确定它不是函数。

如何让我的 FA 刷新图标只旋转一两秒钟，然后停止？

Answer 1

你应该这样做:

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );
    var $el = $(this);
    setTimeout(function() { $el.removeClass( 'fa-spin' ); }, 1000);
    startup();
    // Whatever here.
});

因为 this 是 setTimeout(function(){ 中的其他东西，并且没有指向被点击的元素。

Working Fiddle

查询的 CSS 操作没有排队，但您可以通过执行以下操作使其在“fx”队列中执行:

 $( '#lock-refresh' ).click(function() {
        $(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); });
        startup();
        // Whatever here.
 });

Working Fiddle