javascript - 向上动画进度条

Question

我希望为这个进度条设置动画，但我使用 jQuery animate() 有不同的行为方法。我想以 0.1 秒的延迟将进度条一一动画化。我需要帮助来选择正确的动画，因为现在我的动画表现向下。我想以最简单的方式做到这一点。

这是我到目前为止所拥有的:

$('.vertical-bars .progress-fill span').each(function() {
    var percent = $(this).html();
    var pTop = 100 - (percent.slice(0, percent.length - 1)) + "%";

    $(this).parent().css({
        'height': percent,
        'top': pTop
    });
    $(this).parent().animate({
        height: "toggle"
    }, {
        duration: 900,
        specialEasing: {
            height: "swing"
        }
    });
});

我准备了一个带有进度条的 JSFiddle HERE .

正确的行为是向上填充进度条，如THIS示例。

Answer 1

您需要对条形的高度和顶部进行动画处理，或者您需要构建它们，以便在更改高度时将它们固定到水平轴。第二个需要更多的思考，但第一个虽然不那么优雅，但很简单。

要为顶部设置动画，您不能使用切换(因为它的动画为 100% 然后返回，而不是 0)，因此您需要使用 did 分别为收缩和增长设置动画以触发第二个动画。采用与上面使用的相同的样式:

$('.vertical-bars .progress-fill span').each(function () {
    var percent = $(this).html();
    var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
    $(this).parent().css({
        'height': percent,
        'top': pTop
    });
  var self=this;
    $(this).parent().animate({
    height: 0,
    top: "100%"
  }, {
    duration: 900,
    specialEasing: {
      height: "swing",
      top: "swing"
    },
    done:function(){
        $(self).parent().animate({
        height: percent,
        top: pTop
      }, {
        duration: 900,
        specialEasing: {
          height: "swing",
          top: "swing"
        }     
      })
    }
    });  
});

当然你也可以使用CSS动画来实现同样的效果。如果我有时间弄清楚，我会发布编辑内容。