jQuery中怎樣給動畫增加淡入淡出效果？

在網(wǎng)頁開發(fā)中，適當?shù)厥褂脛赢嬁梢允鬼撁娓用烙^，進而增強用戶體驗。jQuery中內(nèi)置了一系列方法用于實現(xiàn)動畫，jQuery中用于控制元素淡入和淡出效果的方法如表1所示。

在表1中，fadeTo()方法的參數(shù)opacity表示透明度數(shù)值，范圍在0~1之間，0代表完全透明，0.5代表50%透明，1代表完全不透明。接下來通過具體代碼來演示fadeIn()、fadeOut()和fadeTo()方法的使用。

(1)編寫HTML結(jié)構(gòu)，具體代碼如下。

   <style>
    div{width:100px;height:100px;float:left;margin-left:5px;}
   .box{width:425px;height:105px;padding-top:5px;border:1px solid #ccc;}
   .red{background-color:red;}
   .green{background-color:green;}
   .yellow{background-color:yellow;}
   .orange{background-color:orange;}
   </style>
   <div class="box">
  <div class="red"></div><div class="green"></div>
   <div class="yellow"></div><div class="orange"></div>
  </div>

上述代碼中設(shè)置了一組<div>顏色方塊，通過CSS設(shè)置樣式。

      <script>
    $(".box div").fadeTo(2000, 0.2);
    $(".box div").hover(function() {
     $(this).fadeTo(1, 1);
    }, function() {
     $(this).fadeTo(1, 0.2);
    });
   </script>

在上述代碼中，第2行代碼利用fadeTo()方法為所有顏色方塊設(shè)置2秒鐘完成半透明的淡入效果，最后的結(jié)果如圖1所示。

圖1 默認效果

第3~7行代碼用來為每個方塊設(shè)置動畫效果，當鼠標移入時，正常顯示，鼠標移出時時，設(shè)置成半透明的效果。例如，鼠標滑過綠色方塊時，效果如圖2所示。

圖2 鼠標滑過方塊突出顯示

jQuery中attr()和prop()的區(qū)別是什么？

jQuery對象和DOM對象互轉(zhuǎn)的方法

自學jquery教程：傳智播客jquery入門教程下載

演示一下jQuery擴展插件【前端面試題】

傳智教育HTML+js前端培訓