[英]How to start spinning a bootstrap font awesome icon, then make it stop with jQuery
我在我正在处理的网页上有字体真棒刷新图标。
<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刷新图标旋转一两秒,然后停止?
在这种情况下,您不能使用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();
});
你应该做:
$( '#lock-refresh' ).click(function() {
$( this ).addClass( 'fa-spin' );
var $el = $(this);
setTimeout(function() { $el.removeClass( 'fa-spin' ); }, 1000);
startup();
// Whatever here.
});
因为this
是setTimeout(function(){
其他东西,并且没有指向被点击的元素。
查询的CSS操作没有排队,但您可以通过执行以下操作使其在'fx'队列中执行:
$( '#lock-refresh' ).click(function() {
$(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); });
startup();
// Whatever here.
});
做这样的事情(注意:使用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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.