当元素在屏幕上可见时运行动画 [英] Run animation when element is visible on screen
本文介绍了当元素在屏幕上可见时运行动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些进度条脚本.它工作正常,但在页面加载时运行.我想在屏幕上看到条形时运行动画(如果进度条位于选项卡中,它也应该起作用).我怎么能得到这个?
I've a little progress bars script. It works fine but runs on page load. I want to run animation when bars are visible on screen (it should work too if progress bars would be in tabs). How may I get this?
这里的脚本:
setTimeout(function(){
$('.skill-bar .skill-bar-content').each(function() {
var me = $(this);
var perc = me.attr("data-percentage");
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.css('width', (current_perc)+'%');
}
me.text((current_perc)+'%');
}, 10);
});
},10);
jsFiddle: http://jsfiddle.net/fUyYL/
jsFiddle: http://jsfiddle.net/fUyYL/
推荐答案
是这样的吗? http://jsfiddle.net/fUyYL/1/
var ele = $('#skill-bars');
if( ele.is(':visible') ) {
...
}
这篇关于当元素在屏幕上可见时运行动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文