0

このようなアニメーションがあります

<hhtml>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$().ready(function(){

   $(".btn").click(function(){
var obj=$(this).parent().find("img");
var h=$(obj).height();
var w=$(obj).width();
var st=$(obj).offset().top;
var sl=$(obj).offset().left;    

$("body").append("<div id='mtc' style='position:absolute;z-index:100;top:"+st+"px;left:"+sl+"px;'></div>");

$(obj).clone().appendTo("#mtc");
$("#mtc").css({height:'100px',width:'100px',opacity: '0.8'});

$("#mtc").animate({ 
       left:"999px",
       top:"0px"
        },2000,function(){
            $(this).remove();
            });


     });

});
</script>
<style>
   div{
     width:200px;
     height:300px;
     margin:10px;
     padding:5px;
     float:left;
   }
   p{
      .....
    }
</style>
</head>
<body>
  <div> <h3>img1</h3> <img src='a.png'>  <p class='btn'>Click</p> </div>
  <div> <h3>img1</h3> <img src='a.png'>  <p class='btn'>Click</p> </div>
  <div> <h3>img1</h3> <img src='a.png'>  <p class='btn'>Click</p> </div>
  <div> <h3>img1</h3> <img src='a.png'>  <p class='btn'>Click</p> </div>
  <div> <h3>img1</h3> <img src='a.png'>  <p class='btn'>Click</p> </div>
</body>
</html>

それは正常に動作しますが、1 つのアニメーションが進行中で、別の .btn をクリックして別のアニメーションを開始するとします。
2 番目のアニメーションが開始すると、両方が停止します (しばらくハングします)。
それらを滑らかにする必要があります。

4

0 に答える 0