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

在这种情况下，您不能使用delay方法，因为addClass不会返回队列接口以使用延迟。

所以你确实应该使用setTimeout，但在里面使用正确的this值。问题是setTimeout将在全局对象（this === window）上下文中执行回调函数。所以你需要提供一个适当的上下文。为此，使用Function.prototype.bind方法很方便：

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

Answer 2

你应该这样做：

this

因为setTimeout(function(){是$( '#lock-refresh' ).click(function() { $(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); }); startup(); // Whatever here. });内的其他内容，并且未指向所点击的元素。

Working Fiddle

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

for ( var i=0; i<btns.length; i++ ) {      
        btns[i].addEventListener('click', eventData, false);

Working Fiddle

Answer 3

做这样的事情（注意：使用setTimout而不是setInterval，我的坏） https://jsfiddle.net/c7276oww/

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );
    setTimeout(function(){ $( '#lock-refresh' ).removeClass( 'fa-spin' ); }, 3000);
    //Below is a function that I need to run after the FA icon is clicked.
    startup();
});

如何开始旋转引导字体真棒图标，然后使用jQuery

3 个答案: