連續動畫效果jQuery實現

2019-12-13 00:43:59

?還在為jquery學習而發愁麼……快來一起學習吧，每天進步一點點哦*_*現在動畫效果越來越多的應用到網站中，js類庫之一jQuery也是實現動態效果的方法，在這裡學習學習jQuery的連續動畫效果。只需用幾行程式碼，我就可以讓方框到處亂飛，而且帶有縮放和淡出的效果。

1

?htm:<p><a href="#" class="run">Run</a></p><div style="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;" id="box"> </div>

2

?css:<style type="text/css">body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }a { font-weight: bold; color: #000000; }#box { background: #6699FF; height: 100px; width: 100px; position: relative; }</style>

3

?js:<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
  .animate({top: "0"}, "fast")
  .slideUp()
  .slideDown("slow")
  return false;
});
});
</script>

未點選執行的顯示效果

點選逐漸變化

大小發生變化，位置也相應變化執行太快很難捕捉

快要回到原位時的效果

連續動畫效果jQuery實現

1

2

3

熱門文章