jQuery動畫:animate()

可以變動CSS長、寬、大小等屬性,做出動畫的效果

animate()結構

.animate({
    "CSS 屬性": "值",
    "CSS 屬性": "值",
    "CSS 屬性": "值"
}, 動畫時間)

範例

#ani click me
#ani
 width: 300px
 height: 100px
 border: 1px solid #000
 text-align: center
 line-height: 75px
 font-size: 20px
 background-color: #90a955
 color: #fff
$("#ani")
 //滑鼠進入
 .mouseover(
  function(){
   //在.animate前面加stop(),滑鼠拿走後不會繼續執行動畫
   $("#ani").stop().animate(
    {
     //"CSS屬性": "值"
     "font-size": "40px"
     //毫秒
    },500)
  //滑鼠移出
  .mouseout(
   function(){
    $("#ani").stop().animate(
     {"font-size": "20px"}
     ,500)
   } 
  );
 })

Display

click me

Leave a Reply

Your email address will not be published. Required fields are marked *