jQuery中怎樣給動(dòng)畫(huà)增加淡入淡出效果？

在網(wǎng)頁(yè)開(kāi)發(fā)中，適當(dāng)?shù)厥褂脛?dòng)畫(huà)可以使頁(yè)面更加美觀，進(jìn)而增強(qiáng)用戶體驗(yàn)。jQuery中內(nèi)置了一系列方法用于實(shí)現(xiàn)動(dòng)畫(huà)，jQuery中用于控制元素淡入和淡出效果的方法如表1所示。

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

(1)編寫(xiě)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>顏色方塊，通過(guò)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 默認(rèn)效果

第3~7行代碼用來(lái)為每個(gè)方塊設(shè)置動(dòng)畫(huà)效果，當(dāng)鼠標(biāo)移入時(shí)，正常顯示，鼠標(biāo)移出時(shí)時(shí)，設(shè)置成半透明的效果。例如，鼠標(biāo)滑過(guò)綠色方塊時(shí)，效果如圖2所示。

圖2 鼠標(biāo)滑過(guò)方塊突出顯示

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

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

自學(xué)jquery教程：傳智播客jquery入門(mén)教程下載

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

傳智教育HTML+js前端培訓(xùn)