拉斐尔动画为多个div

Question

我新手拉斐尔，我想拉斐尔动画为多个div。目前我有单人div的动画。但我无法为多个div做冲突。

以下是代码

http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/

HTML

<div class="diagram"></div> 
     <div class="get"> 
     <div class="arc"> 
       <span class="text">JavaScript</span> 
       <input type="hidden" class="percent" value="95" /> 
       <input type="hidden" class="color" value="#97BE0D" /> 
     </div> 
      <div class="arc"> 
       <span class="text">CSS3</span> 
       <input type="hidden" class="percent" value="90" /> 
       <input type="hidden" class="color" value="#D84F5F" /> 
      </div> 
     </div> 

<div class="diagram"></div> 
     <div class="get"> 
     <div class="arc"> 
       <span class="text">JavaScript</span> 
       <input type="hidden" class="percent" value="95" /> 
       <input type="hidden" class="color" value="#97BE0D" /> 
     </div> 
      <div class="arc"> 
       <span class="text">CSS3</span> 
       <input type="hidden" class="percent" value="90" /> 
       <input type="hidden" class="color" value="#D84F5F" /> 
      </div> 
     </div> 

等等...

JAVASCRIPT

var o = { 
    init: function(){ 
     this.diagram(); 

    }, 
    random: function(l, u){ 
     return Math.floor((Math.random()*(u-l+1))+l); 
    }, 
    diagram: function(){ 
     var r = Raphael($('.diagram'),600,600), //need effects for all the div 
      rad = 3, 
      defaultText = 'Skills', 
      speed = 250; 

     r.circle(300, 300, 20).attr({ stroke: 'none', fill: '#193340' }); 

     var title = r.text(300, 300, defaultText).attr({ 
      font: '12px Arial', 
      fill: '#fff' 
     }).toFront(); 

     r.customAttributes.arc = function(value, color, rad){ 
      var v = 3.6*value, 
       alpha = v == 360 ? 359.99 : v, 
       random = o.random(91, 240), 
       a = (random-alpha) * Math.PI/180, 
       b = random * Math.PI/180, 
       sx = 300 + rad * Math.cos(b), 
       sy = 300 - rad * Math.sin(b), 
       x = 300 + rad * Math.cos(a), 
       y = 300 - rad * Math.sin(a), 
       path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]]; 
      return { path: path, stroke: color } 
     } 

     $('.get').find('.arc').each(function(i){ 
      var t = $(this), 
       color = t.find('.color').val(), 
       value = t.find('.percent').val(), 
       text = t.find('.text').text(); 

      rad += 17; 
      var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 12 }); 

      z.mouseover(function(){ 
       this.animate({ 'stroke-width': 20, opacity: .75 }, 1000, 'elastic'); 
       if(Raphael.type != 'VML') //solves IE problem 
       this.toFront(); 
       title.stop().animate({ opacity: 0 }, speed, '>', function(){ 
        this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<'); 
       }); 
      }).mouseout(function(){ 
       this.stop().animate({ 'stroke-width': 12, opacity: 1 }, speed*4, 'elastic'); 
       title.stop().animate({ opacity: 0 }, speed, '>', function(){ 
        title.attr({ text: defaultText }).animate({ opacity: 1 }, speed, '<'); 
       }); 
      }); 
     }); 

    } 
} 
$(function(){ o.init(); }); 

http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/

Answer 1

它已经有一段时间我用这个所以纠正我，如果我错了，但：

var r = Raphael($('.diagram'),600,600), //need effects for all the div 
      rad = 3, 
      defaultText = 'Skills', 
      speed = 250; 

拉斐尔对象创建一个画布，然后你操纵它，在这里你有多个div 。拉斐尔期待单个元素的问题（为什么作者使用id而不是styleclass）以及返回一组元素的问题？

如果这是问题，请先尝试获取所有div，然后为每个div执行此代码，而不是将所有div传递到此函数中。