jQuery脚本以动画效果显示线性渐变。

Question

我希望能够拥有一个圆形进度条，所以我搜索了很长时间并找到了许多插件，但我不喜欢其中的任何一个。因此，我用纯CSS构建了自己的进度条：

http://jsfiddle.net/9RFkw/

这很棒，但我有两个问题：

1.) 我正在使用Firefox V28.Final，在25%时它看起来像下面这样：

小边框不应该出现。我该如何修复这个问题？

2.) 我想要一个 jQuery 脚本来动画化进度条（渐变色）。问题是，线性渐变没有统一的结构。我该如何编写脚本，将线性渐变从 0% 到 x% 动画化，就像我用 CSS 建立示例一样？

var start = 0;
var end   = 75;

// Animate linear-gradient from 0 to 75%
$('#progressbar').animate({

});

谢谢！

- user3292653

---

我建议你使用SVG和transition: http://jsfiddle.net/85wnF/ - MatTheCat

Answer 1

您可以使用以下内容作为起点 - 在输入框中输入百分数以查看圆圈动画。

Demo Fiddle

HTML

<svg viewbox="0 0 80 80" height="100" width="100">
    <circle cx="40" cy="40" r="38" stroke="blue" fill="none" stroke-width="3" stroke-dasharray="239" stroke-dashoffset="239" />
</svg>
<br />
<input placeholder='Enter number 1-100..' type='number' />

CSS

svg {
    width: 80px;
}
circle {
    transition: all 1s ease;
    border:1px solid black;
}

jQuery

$('input').on('keyup', function () {
    var perc = 239 - (239 * ($(this).val() / 100));
    perc=(perc > 239) ? perc = 239 : ((perc < 0) ? perc=0: perc);
    $('circle').css('stroke-dashoffset', perc);
});

- SW4

---

谢谢，我下周会尝试一下这个！ - user3292653

有没有办法用jQuery和linear-gradient来实现这个？ - user3292653