Question

I newbie to Raphael and i wanted raphael animation for multiple div. Currently i have animation for single div. But i am unable to do for multiple div it get conflicts.

The following is code

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>

so on…

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

Its been a while since I’ve used this so correct me if I’m wrong, but:

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

The Raphael object creates a canvas and then you manipulate it, here you have multiple divs. Is the problem that Raphael is expecting a single element (why the author used id instead of styleclass) and the issue that your returning an array of elements?

If this is the issue try getting all of the divs first and then execute this code for each div, not passing all the divs into this function.