教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2021年12月16日17時23分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

在網頁開發中,適當地使用動畫可以使頁面更加美觀,進而增強用戶體驗。jQuery中內置了一系列方法用于實現動畫,jQuery中用于控制元素淡入和淡出效果的方法如表1所示。

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

(1)編寫HTML結構,具體代碼如下。

   <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>

上述代碼中設置了一組<div>顏色方塊,通過CSS設置樣式。

(2)為頁面添加鼠標滑過時元素淡入淡出的動畫效果,具體代碼如下。


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

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

圖1 默認效果

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

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



猜你喜歡:

jQuery中attr()和prop()的區別是什么?

jQuery對象和DOM對象互轉的方法

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

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

傳智教育HTML+js前端培訓

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载