如何开始旋转一个引导程序字体真棒图标,然后用jQuery停止它
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刷新图标只旋转一两秒钟,然后停止?
您应该做:
$( '#lock-refresh' ).click(function() {
$( this ).addClass( 'fa-spin' );
var $el = $(this);
setTimeout(function() { $el.removeClass( 'fa-spin' ); }, 1000);
startup();
// Whatever here.
});
因为this
是setTimeout(function(){
内部的其他内容,并且没有指向单击的元素。
工作Fiddle
Query的CSS操作没有排队,但您可以通过以下操作在"fx"队列中执行:
$( '#lock-refresh' ).click(function() {
$(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); });
startup();
// Whatever here.
});
工作Fiddle
在这种情况下不能使用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();
});
这样做(注意:使用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();
});
相关文章:
- Javascript更改图标
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- Javascript运行php文件,然后下载文件
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 弹出窗口出现,然后退出
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 将值输入到对象,然后该对象推送到数组
- 单击更改图标并通过javascript添加一个css类
- 如何临时暂停浏览器渲染,然后恢复整个页面
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 滚动然后捕捉到顶部而不是取消捕捉
- 如何更改角度谷歌地图上的集群图标
- AngularJS加载JSON数据,然后从中解析/加载HTML
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- “预加载”苹果触摸预组合图标,然后再添加到主屏幕
- 如何开始旋转一个引导程序字体真棒图标,然后用jQuery停止它
- 单击播放图标以开始声音,然后单击停止图标以停止声音