查看时激活javascript动画

我使用animantion来为带有百分比的条设置动画，但是它是在javascript中，我已经看到了为CSS动画设置动画的答案，但是我没有找到任何东西可以在用户到达带有条的部分时激活动画

使用我的代码，动画在加载页面的同时加载，我需要在查看内容时加载，因为它不是第一节，如果用户看不到它，则没有必要对其进行动画

谢谢你的帮助，我给了你一个

这是我的javascript：

jQuery(document).ready(function() {
    jQuery('.skillbar').each(function() {
        jQuery(this).find('.skillbar-bar').animate({
            width: jQuery(this).attr('data-percent')
        }, 2500);
    });
});

---

它对我很有效。为了达到你想要的目的，请使用

jQuery（文档）.ready（函数（）{
jQuery（'.skillbar'）。每个（函数（）{
jQuery（this）.find（'.skillbar'）.animate({
宽度：jQuery（this.attr（'data-percent'））
}, 2500);
});
});
#主页{
身高：100%；
背景色：小麦；
}
#技巧{
背景颜色：浅灰色；
身高：100%；
}
h1{
利润率：0；
垫面：5%；
字号：2rem；
字体系列：“roboto”；
颜色：白色；
文本对齐：居中；
}
.容器技能{
宽度：70%；
垫面：5%；
左：10%；
高度：自动；
溢出：无；
}
斯基尔巴先生{
位置：相对位置；
显示：块；
利润底部：4%；
宽度：100%；
背景：浅灰色；
高度：30px；
边界半径：20px；
-moz边界半径：20px；
-webkit边界半径：20px；
-webkit过渡：0.4s易入易出；
-moz转换：0.4s易入易出；
-ms转换：0.4s易进易出；
-o型过渡：0.4s易进易出；
过渡：0.4s缓进缓出；
-webkit转换属性：宽度、背景色；
-moz过渡属性：宽度、背景色；
-ms过渡属性：宽度、背景色；
-o-过渡特性：宽度、背景色；
过渡属性：宽度、背景色；
}
.skillbar标题{
位置：绝对位置；
排名：0；
左：0；
宽度：18%；
字体大小：粗体；
字体大小：1.1米；
颜色：#fff；
背景：#6adcfa；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
}
.skillbar标题范围{
显示：块；
文本对齐：居中；
背景：rgba（0,0,0,0.15）；
填充：0 20px；
高度：30px；
线高：30px；
字体系列：“roboto”；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
}
斯基尔巴酒吧{
高度：30px；
宽度：0px；
左侧填充：25px；
边界半径：20px；
-moz边界半径：20px；
-webkit边界半径：20px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
}
.技能栏百分比{
位置：绝对位置；
右：10px；
顶部：0px；
字体系列：“roboto”；
字号：900；
高度：30px；
线高：30px；
颜色：黑色；
不透明度：0.5；
}

Mes兼容性
Photoshop
75%
插图画家
70%
杂志排版
50%
首映 式
65%
后效
45%
HTML5
75%
CSS3
50%
滑动分页
35%
一个简单的例子：

var check_is_in_view = function(elm){
    var bounds = elm.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}
var your_element = document.getElementById("foo");
var result = check_is_in_view(your_element);
console.log(result);

var检查在视图=函数（elm）中为{
var bounds=elm.getBoundingClientRect（）；
返回bounds.top0；
}
var your_element=document.getElementById（“foo”）；
var result=检查\u是否在\u视图中（您的\u元素）；
控制台日志（结果）；

希望，这会有帮助

更新：
这对我有用。我知道这是可行的，但实际上我在这之前有一个部分，当你在网站上时，技能部分不在屏幕上，当用户滚动到它时，我希望它被动画化：）滚动后如何加载其他代码？您是否使用了延迟加载？然后
DOM
ready
做所有事情。加载html后绑定
动画的。你面临什么问题？你能再解释一下吗？：）你必须使用它来实现这一点。检查它的demo.foo只是一个名称。在您的例子中：$（document）.ready（function（）{$（'.skillbar'）。每个（function（）{if（check_is_in_view（$（this））{//Animate$（this）.Animate（{width:jQuery（this）.attr（'data-percent'）}，2500）；}其他{//Do nothing}）；}）；