buangbuang.js

// First nominate the div to hold the Raphael svg
var r = Raphael("holder", 695, 600);
var circX = 350;//$('#outerWrapper').width() / 2,
var circY = 260;//$('#outerWrapper').height() / 2,
var circle1 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
var circle2 = r.circle(circX, circY, 0).attr({fill:"#0000ff", 'stroke-width':0, 'opacity':'.2'});
var circle3 = r.circle(circX, circY, 0).attr({fill:"#ff0000", 'stroke-width':0, 'opacity':'.2'});
var disappear = Raphael.animation({opacity: 0}, 200, function(){
  circle1.remove();
  circle2.remove();
  circle3.remove();
  circle1 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
  circle2 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
  circle3 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
});
var do_disappear = function(){
  circle1.animate(disappear);
  circle2.animate(disappear);
  circle3.animate(disappear);
}
var bigger = Raphael.animation({r: 400}, 400, do_disappear);

function ba(){
  var r = Raphael("holder", 695, 600);
  var circX = 350;//$('#outerWrapper').width() / 2,
  var circY = 260;//$('#outerWrapper').height() / 2,
  var circle1 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
  var disappear = Raphael.animation({opacity: 0}, 200, function(){
    circle1.remove();
    circle1 = r.circle(circX, circY, 0).attr({fill:"#00FF00", 'stroke-width':0, 'opacity':'.2'});
    repeat();
  });
  var do_disappear = function(){
    circle1.animate(disappear);
  }
  var bigger = Raphael.animation({r: 400}, 400, do_disappear);
  circle1.animate(bigger);
}

function repeat(){
  ba();
}

function buang(){
	// Then create some vars to centre the circles
  
  circle1.animate(bigger);  
  circle2.animate(bigger.delay(200));
  circle3.animate(bigger.delay(400));
  circle1 = circle1.attr({'stroke-width':0, 'opacity':'.2'})
  circle2 = circle2.attr({'stroke-width':0, 'opacity':'.2'})
  circle3 = circle3.attr({'stroke-width':0, 'opacity':'.2'})
}

function buang1(){
	// Then create some vars to centre the circles
	circX = 350;//$('#outerWrapper').width() / 2,
	circY = 260;//$('#outerWrapper').height() / 2,
  circle1.animate({r:400},800,function(){
    buang2();
    circle1.animate({opacity:0},200,function(){
      circle1.remove();
    });
  });  
}

function buang2(){
	// Then create some vars to centre the circles
	circX = 350;//$('#outerWrapper').width() / 2,
	circY = 260;//$('#outerWrapper').height() / 2,
  circle1.animate({r:400},800,function(){
    buang1();
    circle2.animate({opacity:0},200,function(){
      circle2.remove();
    });
  });  
}

function buang3(){
	// Then create some vars to centre the circles
	circX = 350;//$('#outerWrapper').width() / 2,
	circY = 260;//$('#outerWrapper').height() / 2,
  circle1 = r.circle(circX, circY, 0).attr({fill:"#ff0000", 'stroke-width':0, 'opacity':'.2'})
  circle1.animate({r:400},800,function(){
    buang1();
    circle1.animate({opacity:0},200,function(){
      circle1.remove();
      
    });
  });  
}