Анимация Рафаэля для нескольких divs

Question

Я новичок в Рафаэле, и мне нужна анимация raphael для нескольких 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; 

Объект Рафаэль создает холст, а затем манипулировать его, здесь у вас есть несколько дивы , Является ли проблема тем, что Рафаэль ожидает один элемент (почему автор использовал id вместо styleclass) и проблема, связанная с возвратом массива элементов?

Если это проблема, попробуйте сначала получить все из div, а затем выполнить этот код для каждого div, не передавая все div в эту функцию.