jQuery的animate 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    img { position: relative; }
  </style>
</head>
<body>
<img id="s1" src="img/star.png"><br/>
<img id="s2" src="img/star.png"><br/>
<img id="s3" src="img/star.png"><br/>
<img id="s4" src="img/star.png"><br/>

<script src="js/jquery-1.11.3.js"></script>
<script>
  /*
  s1在屏幕左上角的小星星， 点击后从左移动到屏幕右边
  s2在屏幕左上角的小星星，点击后从左移动到屏幕右边，再移动到下边——走直角
  s3在屏幕左上角的小星星，点击后从左上角移动到屏幕右下边，走斜线
  s4点击小星星，变大、变淡....  直至消失
*/
$("#s1").click(function(){
  var $s1=$(this);
  if(!$s1.is(":animated"))
  $s1.animate({left:300},2000);
  else $s1.stop();
})
$("#s2").click(function(){//这里有队列，先左后下
 var $s2=$(this);
  if(!$s2.is(":animated"))
    $s2.animate({left:300},1000).animate({top:300},1000);
  else $s2.stop(true);
})
$("#s3").click(function(){
  var $s1=$(this);
  if(!$s1.is(":animated"))
     $s1.animate({left:300,top:300},2000);
    else $s1.stop();
})
$("#s4").click(function(){
  $(this).animate({
  width:200,
  height:200,
  //这里是为了让小星星以中心为原点开始消失，所以要把星重新摆正
  marginLeft:-36,
  marginTop:-36,
  opacity:0

  },2000,function(){$(this).hide();});
})
</script>
</body>
</html>

 

posted @ 2018-04-10 18:21  虎太郎的小肚腩  阅读(198)  评论(0)    收藏  举报