0

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>

ここにフィドルがあります - http://jsfiddle.net/stackmanoz/vbkBQ/9/

4

1 に答える 1

0

このスクリプトはあなたが期待していることをします

 $(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要素がアニメーション化されて新しい位置に移動されたかどうかを確認し、移動された場合はリセットされ、そうでない場合はその要素をアニメーション化します。この同様のチェックは、フィドルの他の要素に対しても実行できます。

于 2013-01-23T04:41:40.187 に答える