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 开始另一个。
当第二个动画开始时，两者都停止（并挂起一段时间）。
我需要让他们顺利。

4

0 回答 0