Jquery IE 9 中的动画圆弧/圆绘图

Question

我正在尝试找到一种仅使用 jquery 来制作圆弧/圆动画的解决方案 - 没有 HTML5 或 CSS3，因为这需要在 IE 9 中工作。

我找到了几个 jquery 插件，但是 none 可以在 IE 9 中使用。

http://blog.templatemonster.com/demos/how-to-build-jquery-animated-circle-statistics/demo/index.html

http://www.jqueryscript.net/demo/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress/

有没有办法仅使用 jquery 来制作圆弧动画？

Answer 1

您正在寻找这样的东西吗？ Here is the JS.Fiddle

JQuery:

 $(function() {
  $(".circle1").mouseover(function() {
    $(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 1}, 200);
  }).mouseout(function() {
    $(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
  });
});

CSS:

.circle1 {
    position:absolute; top:50px; left:50px;
    width: 0px; height: 0px;
    border:1px solid red;
    padding:20px;
    border-radius:50%;
}

HTML:

<div class="circle1"></div>

希望对您有所帮助。

Answer 2

此处为动画圆圈示例

http://kottenator.github.io/jquery-circle-progress/

看起来效果不错。

我已经在 IE9 和 firefox、chrome 和 safari 中测试过，看起来不错。

Jquery IE 9 中的动画圆弧/圆绘图

Jquery animated arc / circle drawing in IE 9

javascript

css

jquery

internet-explorer