要將該動畫複製回原來的位置

我正在製作一個動畫，使用CSS進行設計，並使用JQUERY完成動作。這工作正常，現在如果用戶再次點擊按鈕，那麼這個動畫應該有它以前的位置。要將該動畫複製回原來的位置

這裏是我的代碼 -

<!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>

這裏是fiddle- http://jsfiddle.net/stackmanoz/vbkBQ/9/

來源

2013-01-23 Manoj

請參閱http://jsfiddle.net/bstakes/hzFTg/#base小提琴。希望它可以幫助 –

@ManojKumar，你將不得不更加具體：你是否希望按鈕從一開始就以完全相同的方式重複完全相同的動畫？每次按下時，你是否希望它回到動畫幀？你想讓它倒退嗎？ – Norguard

@Norguard，我想要動作切換，當動畫完成時，你再次點擊按鈕，你會得到相同的。是的，我希望它重複動畫，每次我點擊按鈕 – Manoj

這個腳本做什麼你期待

$(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%'); 
    } 
});});

該腳本檢查P元素是動畫和移動到一個新的位置，如果移動它重置它，否則它動畫eleme NT。這個類似的檢查也可以爲您的小提琴中的其他元素完成。

來源

2013-01-23 04:41:40 Mehavel

我不想給其他職位。我想要的是如果動畫完成，那麼它應該自動移動到第二次點擊之前的狀態。有什麼辦法嗎？ – Manoj

@usman在您的quesion發佈的小提琴[鏈接]（http://jsfiddle.net/bstakes/hzFTg/#base）就是這麼做的。 – Mehavel

要將該動畫複製回原來的位置

回答

相關問題