kevin15man
New Member
I am making an animation, designed with CSS and actions are done with JQUERY.This is working fine, now if user clicks button again then this animation should have positions it had previously.Here is my code-\[code\]<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(document).ready(function(){$(".t").click(function(){$("p").animate({left:'350px',top:'350px'},1000);$("p").animate({left:'600px'},1000);$("p").animate({top:'348px',opacity:'0.8'},500);});});$(document).ready(function(){$(".t").click(function(){$(".u").animate({right:'350px',top:'260px'},1000);$(".u").animate({left:'500px'},500);});});$(document).ready(function(){$(".t").click(function(){$("#q").animate({top:'250px',opacity:'0.4'},1000);$("#q").animate({left:'500px'},500);$("#q").animate({top:'460px'},500);$("#q").animate({left:'500'},500);});});$(document).ready(function(){$(".t").click(function(){$("#s").animate({top:'350px',left:'400px'},500);$("#s").animate({top:'360px'},500);});});$(document).ready(function(){$(".t").click(function(){$("#c").animate({top:'360px',left:'500px',opacity:'0.5'},500);});});</script></head><body><input type="submit" style="width:80px;font-size:2em;color:white;height:80px;box-shadow:0px -0px 5px skyblue; border-radius:100%;font-weight:bold;font-family:calibri;text-shadow: -1px -1px 0px #111111;background-color:#98bf22;cursor
ointer;" value="http://stackoverflow.com/questions/14472384/Press" class="t"></input><span id="s" style="background:red;width:100px;height:100px;position:absolute;box-shadow:0px 0px 5px 1px white;top:22%;left:20%;border-top-left-radius:100%;border-bottom-left-radius:100%;"></span><p style="background:#777641;border-top-right-radius:100%;border-bottom-right-radius:100%;width:100px;height:100px;position:absolute;top:21.3%;left:60%;box-shadow:0px 0px 5px 2px white;"></p><span class="u" style="background:#2198bf;border-top-right-radius:100%;border-top-left-radius:100%;width:100px;height:100px;position:absolute;top:14%;left:40%;box-shadow:0px 0px 5px 3px white;"></span><span id="q" style="background:blue;width:100px;border-bottom-left-radius:100%;border-bottom-right-radius:100%;height:100px;position:absolute;top:30%;left:40%;box-shadow:0px 0px 5px 2px white;"></span><span id="c" style="background:yellow;width:100px;height:100px;position:absolute;top:22%;left:40%;box-shadow:0px 0px 5px 1px white;"></span></body></html>\[/code\]Here is fiddle-http://jsfiddle.net/stackmanoz/vbkBQ/9/
ointer;" value="http://stackoverflow.com/questions/14472384/Press" class="t"></input><span id="s" style="background:red;width:100px;height:100px;position:absolute;box-shadow:0px 0px 5px 1px white;top:22%;left:20%;border-top-left-radius:100%;border-bottom-left-radius:100%;"></span><p style="background:#777641;border-top-right-radius:100%;border-bottom-right-radius:100%;width:100px;height:100px;position:absolute;top:21.3%;left:60%;box-shadow:0px 0px 5px 2px white;"></p><span class="u" style="background:#2198bf;border-top-right-radius:100%;border-top-left-radius:100%;width:100px;height:100px;position:absolute;top:14%;left:40%;box-shadow:0px 0px 5px 3px white;"></span><span id="q" style="background:blue;width:100px;border-bottom-left-radius:100%;border-bottom-right-radius:100%;height:100px;position:absolute;top:30%;left:40%;box-shadow:0px 0px 5px 2px white;"></span><span id="c" style="background:yellow;width:100px;height:100px;position:absolute;top:22%;left:40%;box-shadow:0px 0px 5px 1px white;"></span></body></html>\[/code\]Here is fiddle-http://jsfiddle.net/stackmanoz/vbkBQ/9/