Question

我正在尝试为多个进度/加载栏设置动画。下面的代码按照我想要的方式工作，我可以复制并粘贴然后替换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%' });
});

但是它在第一个对象达到要求时而不是每个单独的对象达到所述要求时同时运行所有动画。

Answer 1

您总是可以将其包装在一个函数中并像这样使用它

function myAnimation(selector){
  selector.waypoint(function() {
    selector.css({
      animation: "loading 1s linear",
      opacity: "1"
    });
  }, { offset: '95%' });
}

myAnimation($('#bar-y'));

通过这种方式，您可以使用任何类型的选择器反复调用动画，并且可重复使用。

我建议阅读一些函数式编程。

Answer 2

似乎其他答案并没有承认您问题的排队方面，因此我想我会谈谈。在这种情况下，您可以遍历所有元素，并将动画每秒钟附加一秒钟。

使用下面的代码，所有setTimeout()将同时实例化，但是第一个将用于0ms，第二个1000ms，第三个{{1 }}，依此类推。

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;
}

Answer 3

查看Waypoint之后，看来您的问题出在回调函数中使用了$stat对象：

...
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
...

达到其中一个航点的要求时，它将在$stat包含的所有元素上调用.css动画。您需要使它更具动态性，并使用this.element代替$stat（或类似方法，具体取决于您使用的Waypoint的版本）。

Answer 4

var divId = "#bar-x";


function animate (var divId)
{

 var $stat = $(divId);

  $stat.waypoint(function() {
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
  }, { offset: '95%' });

}

如何分别为不同的ID运行相同的功能

4 个答案:

演示