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

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

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

Answer 1

您需要为条形图的高度和顶部设置动画，或者需要构建它们，以便在更改高度时将它们固定到水平轴上。第二个需要更多的思考，但第一个虽然不那么优雅，但是很直接。

要设置顶部动画，您无法使用切换（因为它的动画效果为100％并且返回，而不是0），因此您需要为缩小设置动画并使用done分别增长以触发第二个动画。采用与上面相同的风格：

$('.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动画实现同样的功能。如果我有时间搞清楚，我会发布一个编辑。

Answer 2

我不知道height: "toggle"做了什么，但你基本上想要从顶部设置0高度和100%偏移量，然后开始调整两种风格的动画。

动画之间的100毫秒只需使用setTimeout并递增超时即可完成。

https://jsfiddle.net/kss1su0b/1/

var elm = $(this).parent();

elm.css({
    'top': '100%',
    'height': 0
});

setTimeout(function() {
    elm.animate({
        'height': percent,
        'top': pTop
    }, {
        duration: 900,
        specialEasing: {
            height: "swing"
        },
    });
}, animOffset);

animOffset += 100;

Answer 3

反转动画方向的最简单且最佳的方法是将底部的条形与css对齐：

vertical-bars .progress-fill {
  position: absolute;
  bottom: 0;
}

然后你不需要再用jQuery设置顶部并设置延迟：

$('.vertical-bars .progress-fill').each(function (index) {
    var percentage = $(this).find('.percentage').html();
    $(this).delay(index * 100).animate(
        {
            height: percentage
        }, {
            duration: 900,
            done: function () {
                $(this).find('span').show("normal");
            }
        }
    );
});

jsfiddle

向上动画进度条

3 个答案: