如何对不同的ID分别运行同一函数
如何对不同的ID分别运行同一函数
提问于 2018-07-24 04:36:03
我正在尝试制作多个进度/加载栏的动画。下面的代码按照我想要的方式工作，我只需要复制和粘贴，然后替换ID名称，但这似乎不必要的长。将我的jquery代码与不同类型的ID(例如：#bar-x，#bar-y，#bar-z)一起使用的有效方式是什么？我尝试过用逗号分隔，如下所示
$(function() {
var $stat = $('#bar-x, #bar-y, #bar-z');
$stat.waypoint(function() {
$stat.css({
animation: "loading 1s linear",
opacity: "1"
});
}, { offset: '95%' });
});但是，当第一个对象达到要求时，而不是当每个单独的对象达到所述要求时，它会同时运行所有动画。
回答 4
Stack Overflow用户
发布于 2018-07-24 04:40:48
您总是可以将它包装在一个函数中，并像这样使用它
function myAnimation(selector){
selector.waypoint(function() {
selector.css({
animation: "loading 1s linear",
opacity: "1"
});
}, { offset: '95%' });
}
myAnimation($('#bar-y'));这样，你就可以用任何类型的选择器重复调用你的动画，并且可以重复使用。
我建议阅读一些函数式编程的知识。
Stack Overflow用户
发布于 2018-07-24 04:53:47
似乎其他答案没有意识到您的问题的排队方面，所以我想我应该触及这一点。在这种情况下，您可以遍历元素，并将动画相隔一秒附加到每个元素。
使用下面的代码，将同时实例化所有的setTimeout()，但是第一个将用于0ms，第二个1000ms，第三个2000ms，依此类推。
var $stat = $('.bar'); //add class "bar" to each item you want to be included
var msDelay = 1000;
$stat.each(function(index) {
setTimeout(() => loadNext($(this)), msDelay * index);
});
function loadNext($elem) {
$elem.waypoint(function() {
$elem.css({
animation: "loading 1s linear",
opacity: "1"
});
}, {
offset: '95%'
});
};演示
var $stat = $('.bar');
var msDelay = 1000;
$stat.each(function(index) {
setTimeout(() => loadNext($(this)), msDelay * index);
});
function loadNext($elem) {
$elem.css({ opacity: "1" });
};.bar {
opacity: 0;
padding: 20px;
margin: 5px;
background-color: red;
transition: opacity 1s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
Stack Overflow用户
发布于 2018-07-24 04:55:04
在查看了路点之后，您的问题似乎来自于在回调函数中使用$stat对象：
...
$stat.css({
animation: "loading 1s linear",
opacity: "1"
});
...当达到其中一个路点的要求时，它将在$stat包含的所有元素上调用您的.css动画。您需要做的是使其更具动态性，并使用this.element代替$stat (或者类似的，取决于您正在使用的航点的版本)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51486866
复制相关文章
相似问题