$(document).ready(function(){ var n=8; var n_t=''; auto(); autos(); vImg2_ed(); vImg3_ed(); vImg4_ed(); vImg5_ed(); $(".vgBtn .vgBtn01").click(function(){ clearInterval(id);n=4;auto();autos(); }); $(".vgBtn .vgBtn02").click(function(){ clearInterval(id);n=0;auto();autos(); }); $(".vgBtn .vgBtn03").click(function(){ clearInterval(id);n=1;auto();autos(); }); $(".vgBtn .vgBtn04").click(function(){ clearInterval(id);n=2;auto();autos(); }); $(".vgBtn .vgBtn05").click(function(){ clearInterval(id);n=3;auto();autos(); }); $(".stop_motion").click(function(){ n_t=n; clearInterval(id); $(".plays").css("display","block"); $(".stops").css("display","none"); }); $(".play_motion").click(function(){ clearInterval(id);n=n_t;auto();autos(); $(".plays").css("display","none"); $(".stops").css("display","block"); }); // vImg1 시작하는 모션 function vImg1_st(){ $("#vImg1 p.bg").stop().fadeIn(3000); $("#vImg1 p.t01").stop().animate({"top": "50px"}, 2000, "easeInOutBack"); $("#vImg1 p.t02").stop().delay(100).animate({"top": "160"}, 2000, "easeInOutBack"); $("#vImg1 p.t03").stop().delay(150).animate({"top": "220"}, 2000, "easeInOutBack"); } // vImg1 종료하는 모션 function vImg1_ed(){ $("#vImg1 p.bg").stop().fadeOut(3000); $("#vImg1 p.t01").stop().delay(150).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg1 p.t02").stop().delay(100).animate({"top": "350px"}, 1600, "easeInOutBack"); $("#vImg1 p.t03").stop().animate({"top": "350"}, 2000, "easeInOutBack"); } // vImg2 시작하는 모션 function vImg2_st(){ $("#vImg2 p.bg").stop().fadeIn(3000); $("#vImg2 p.t01").stop().animate({"top": "50px"}, 2000, "easeInOutBack"); $("#vImg2 p.t02").stop().delay(100).animate({"top": "160px"}, 2000, "easeInOutBack"); $("#vImg2 p.t03").stop().delay(150).animate({"top": "220"},2000, "easeInOutBack"); } // vImg2 종료하는 모션 function vImg2_ed(){ $("#vImg2 p.bg").stop().fadeOut(3000); $("#vImg2 p.t01").stop().delay(150).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg2 p.t02").stop().delay(100).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg2 p.t03").stop().animate({"top": "350"}, 2000, "easeInOutBack"); } // vImg3 시작하는 모션 function vImg3_st(){ $("#vImg3 p.bg").stop().fadeIn(3000); $("#vImg3 p.t01").stop().animate({"top": "50px"}, 2000, "easeInOutBack"); $("#vImg3 p.t02").stop().delay(100).animate({"top": "160px"}, 2000, "easeInOutBack"); $("#vImg3 p.t03").stop().delay(150).animate({"top": "220px"}, 2000, "easeInOutBack"); } // vImg3 종료하는 모션 function vImg3_ed(){ $("#vImg3 p.bg").stop().fadeOut(3000); $("#vImg3 p.t01").stop().delay(150).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg3 p.t02").stop().delay(100).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg3 p.t03").stop().animate({"top": "350px"}, 2000, "easeInOutBack"); } // vImg4 시작하는 모션 function vImg4_st(){ $("#vImg4 p.bg").stop().fadeIn(3000); $("#vImg4 p.t01").stop().animate({"top": "50px"}, 2000, "easeInOutBack"); $("#vImg4 p.t02").stop().delay(100).animate({"top": "160px"}, 2000, "easeInOutBack"); $("#vImg4 p.t03").stop().delay(150).animate({"top": "220px"}, 2000, "easeInOutBack"); } // vImg4 종료하는 모션 function vImg4_ed(){ $("#vImg4 p.bg").stop().fadeOut(3000); $("#vImg4 p.t01").stop().delay(150).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg4 p.t02").stop().delay(100).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg4 p.t03").stop().animate({"top": "350px"}, 2000, "easeInOutBack"); } // vImg5 시작하는 모션 function vImg5_st(){ $("#vImg5 p.bg").stop().fadeIn(3000); $("#vImg5 p.t01").stop().animate({"top": "50px"}, 2000, "easeInOutBack"); $("#vImg5 p.t02").stop().delay(100).animate({"top": "160px"}, 2000, "easeInOutBack"); $("#vImg5 p.t03").stop().delay(150).animate({"top": "220px"}, 2000, "easeInOutBack"); } // vImg5 종료하는 모션 function vImg5_ed(){ $("#vImg5 p.bg").stop().fadeOut(3000); $("#vImg5 p.t01").stop().delay(150).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg5 p.t02").stop().delay(100).animate({"top": "350px"}, 2000, "easeInOutBack"); $("#vImg5 p.t03").stop().animate({"top": "350px"}, 2000, "easeInOutBack"); } function auto(){ n=n+1; if(n>4){ n=0; } vgIcon(n); if(n==0){vImg2_ed();vImg3_ed();vImg4_ed();vImg5_ed();vImg1_st();} if(n==1){vImg1_ed();vImg3_ed();vImg4_ed();vImg5_ed();vImg2_st();} if(n==2){vImg1_ed();vImg2_ed();vImg4_ed();vImg5_ed();vImg3_st();} if(n==3){vImg1_ed();vImg2_ed();vImg3_ed();vImg5_ed();vImg4_st();} if(n==4){vImg1_ed();vImg2_ed();vImg3_ed();vImg4_ed();vImg5_st();} } function autos(){ id = setInterval(function(){auto();}, 6000); } }); function vgIcon(num){ $(".vgBtnRe").each(function(index){ if(num == index){ $(this).addClass("on"); $(".plays").css("display","none"); $(".stops").css("display","block"); }else{ $(this).removeClass("on"); } }); }