3 D特効-jQuery
8666 ワード
var timer;
var flag=false;
$(document).ready(function(){
function run(){
timer = setInterval(function(){
var oDiv = document.createElement("div");
//
$(oDiv).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"0px",
"top":"300px"
});
$(oDiv).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"200px",
"top":"350px"
},5000,function(){
oDiv.parentNode.removeChild(oDiv);
});
var oDiv1 = document.createElement("div");
$(oDiv1).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"200px",
"top":"350px"
}).delay(5000);
$(oDiv1).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"300px"
},5000,function(){
oDiv1.parentNode.removeChild(oDiv1)
}).delay(5000);
var oDiv2 = document.createElement("div");
$(oDiv2).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"300px"
}).delay(10000);
$(oDiv2).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"500px",
"top":"350px"
},5000,function(){
oDiv2.parentNode.removeChild(oDiv2)
}).delay(10000);
var oDiv3 = document.createElement("div");
$(oDiv3).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"500px",
"top":"350px"
}).delay(15000);
$(oDiv3).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"600px",
"top":"300px"
},5000,function(){
oDiv3.parentNode.removeChild(oDiv3)
}).delay(15000);
//
var oDiv4 = document.createElement("div");
$(oDiv4).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"0px"
});
$(oDiv4).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"350px",
"top":"200px"
},5000,function(){
oDiv4.parentNode.removeChild(oDiv4);
});
var oDiv5 = document.createElement("div");
$(oDiv5).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"350px",
"top":"200px"
}).delay(5000);
$(oDiv5).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"300px"
},5000,function(){
oDiv5.parentNode.removeChild(oDiv5)
}).delay(5000);
var oDiv6 = document.createElement("div");
$(oDiv6).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"300px"
}).delay(10000);
$(oDiv6).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"350px",
"top":"500px"
},5000,function(){
oDiv6.parentNode.removeChild(oDiv6)
}).delay(10000);
var oDiv7 = document.createElement("div");
$(oDiv7).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"350px",
"top":"500px"
}).delay(15000);
$(oDiv7).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"600px"
},5000,function(){
oDiv7.parentNode.removeChild(oDiv7)
}).delay(15000);
$(document.body).append(oDiv);
$(document.body).append(oDiv1);
$(document.body).append(oDiv2);
$(document.body).append(oDiv3);
$(document.body).append(oDiv4);
$(document.body).append(oDiv5);
$(document.body).append(oDiv6);
$(document.body).append(oDiv7);
},200);
};
$("#btn").click(function(){
if(flag){
clearInterval(timer);
flag = false;
}else{
run();
flag = true;
};
});
});