Want this animation back to previous positions

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-

<!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:pointer;" value="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>

Here is fiddle- http://jsfiddle.net/stackmanoz/vbkBQ/9/

Answers


This script does what you are expecting

 $(document).ready(function(){
$(".t").click(function(){
    if($("p").css("left") == '60%'){  //check if p exist in the default position
        $("p").animate({left:'350px',top:'350px'},1000);
        $("p").animate({left:'600px'},1000);
        $("p").animate({top:'348px',opacity:'0.8'},500);
    }else{ //if p is animated and move to new position reset is position
        alert("here");
        $("p").css('top','21.3%');
        $("p").css('left','60%');
    }
});});

This script checks if the P element is animated and moved to a new position, if moved it resets it, else it animates that element. This similar check can be done for other elements in your fiddle too.


Need Your Help

Activity Stream

android-activity stream

I have seen a thousand ways show XML, JSON, and other complicated ways of showing activity data.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.