jQuery實現(xiàn)淡入淡出效果
更新時間：2021年08月08日 11:41:33 作者：Wellfancy
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用jQuery完成淡入淡出效果前，我們先來認識幾個代碼：
- 淡入 fadeIn([ speed , [easing] , [fn] ])，參數(shù)都可不寫
- 淡出 fadeOut([ speed , [easing] , [fn] ])，參數(shù)都可不寫
- 淡入淡出切換 fadeToggle([ speed , [easing] , [fn] ])，參數(shù)都可不寫
- 修改透明度 fadeTo([ [speed] , opacity , [easing] , [fn] ])，注意，這里速度和透明度一定要寫
其中
- speed是速度
- easing是切換效果
- fn是回調(diào)函數(shù)
那我們把上述代碼放到整體代碼中看下效果
完整代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wellfancy</title>
<style>
div {
margin: 10px;
padding: 10px;
width: 100px;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div>
<img src="images/1.jpg" style="width: 280px;">
</div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
JQuery觸發(fā)radio或checkbox的change事件
在JQuery中，當(dāng)給radio或checkbox添加一個change事件時，如果它的值發(fā)生變化就會觸發(fā)change事件;本文將詳細介紹如何利用JQuery觸發(fā)Checkbox的change事件需要了解的朋友可以參考下2012-12-12
jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
這篇文章主要介紹了通過jQuery實現(xiàn)的頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery中:gt選擇器用法,實例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個很常見的表格。通常對分類的字段先進行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12
這篇文章介紹了Jquery實現(xiàn)Ajax跨域訪問的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了jQuery拖動元素并對元素進行重新排序的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-12-12
今天給大家分享一個jquery插件之步驟進度軸的實現(xiàn)思路，這個功能在一些網(wǎng)站注冊賬號時一般都會用到，今天就通過實例代碼給大家詳細介紹下，感興趣的朋友跟隨小編一起看看吧2021-05-05
jQuery實現(xiàn)模擬marquee標(biāo)簽效果
這篇文章主要介紹了jQuery實現(xiàn)模擬marquee標(biāo)簽效果的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JQuery each()嵌套使用，非常適合初學(xué)者,需要的朋友可以參考下2014-04-04