更新時間:2021年12月16日17時23分 來源:傳智教育 瀏覽次數(shù):
在網(wǎng)頁開發(fā)中,適當(dāng)?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è)置樣式。
(2)為頁面添加鼠標(biāo)滑過時元素淡入淡出的動畫效果,具體代碼如下。
<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行代碼用來為每個方塊設(shè)置動畫效果,當(dāng)鼠標(biāo)移入時,正常顯示,鼠標(biāo)移出時時,設(shè)置成半透明的效果。例如,鼠標(biāo)滑過綠色方塊時,效果如圖2所示。
圖2 鼠標(biāo)滑過方塊突出顯示
jQuery中attr()和prop()的區(qū)別是什么?