动画进度条向上

Question

我正在寻找动画这个进度条，但我使用jQuery animate()方法有不同的行为。我想以0.1s的延迟逐个动画进度条。我需要选择正确的动画方面的帮助，因为现在我的动画行为向下。我想尽可能以最简单的方式做到这一点。

这是我到目前为止有：

$('.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

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

动画之间的100ms仅通过使用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 2

反转动画方向最简单和最的表演方式是使在底部的酒吧与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

Answer 3

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

要设置动画顶部，您不能使用切换（因为它将动画设置为100％，而不是0），所以您需要动画缩小和增大分开使用完成来触发第二个动画。采用与上面所用相同的样式：

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