拉斐爾動畫爲多個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傳遞到此函數中。