首頁 > web前端 > js教程 > jquery怎麼達到淡入淡出效果

jquery怎麼達到淡入淡出效果

coldplay.xixi
發布: 2021-01-18 17:42:49
原創
4365 人瀏覽過

jquery實現淡入淡出效果的方法:首先新建文本文檔,並引入jquery;然後使用方法【fadeIn()】淡入已隱藏的元素;最後使用方法【fadeOut()】淡出可見的元素。

jquery怎麼達到淡入淡出效果

本教學操作環境:windows7系統、jquery3.2.1版,Dell G3電腦。

jquery實作淡入淡出效果的方法:

1、新文字文檔,用於程式碼展示和書寫,如圖所示;

jquery怎麼達到淡入淡出效果

2、建立兩個div,id為div1,div2,如圖;

jquery怎麼達到淡入淡出效果

3、引入jquery.js,接下來要用到,如圖所示;

jquery怎麼達到淡入淡出效果

4、fadeIn()方法,可以淡入已隱藏的元素,如圖所示;

jquery怎麼達到淡入淡出效果

5、fadeOut()方法,可以淡出可見的元素,如圖所示;

jquery怎麼達到淡入淡出效果

6、fadeToggle()方法,如果隱藏,則淡入,如果可見,則淡出;

jquery怎麼達到淡入淡出效果

7、fadeTo ("slow",0.4),如圖所示,可以漸變為給定的不透明度

jquery怎麼達到淡入淡出效果

相關學習推薦:javascript影片教學

以上是jquery怎麼達到淡入淡出效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板