jQuery實(shí)現(xiàn)淡入淡出效果

更新時(shí)間：2021年08月08日 11:41:33 作者：Wellfancy

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用jQuery完成淡入淡出效果前，我們先來(lái)認(rèn)識(shí)幾個(gè)代碼：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-05-05
JQuery觸發(fā)radio或checkbox的change事件
在JQuery中，當(dāng)給radio或checkbox添加一個(gè)change事件時(shí)，如果它的值發(fā)生變化就會(huì)觸發(fā)change事件;本文將詳細(xì)介紹如何利用JQuery觸發(fā)Checkbox的change事件需要了解的朋友可以參考下
2012-12-12
jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
這篇文章主要介紹了通過(guò)jQuery實(shí)現(xiàn)的頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部,需要的朋友可以參考下
2014-06-06
jQuery中:gt選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:gt選擇器用法,實(shí)例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項(xiàng)目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1，這是一個(gè)很常見(jiàn)的表格。通常對(duì)分類的字段先進(jìn)行排序。為了讓分類表現(xiàn)的更直觀。
2010-12-12
Jquery+Ajax實(shí)現(xiàn)跨域訪問(wèn)
這篇文章介紹了Jquery實(shí)現(xiàn)Ajax跨域訪問(wèn)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
這篇文章主要介紹了jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2015-12-12
jquery 步驟進(jìn)度軸插件的實(shí)現(xiàn)代碼
今天給大家分享一個(gè)jquery插件之步驟進(jìn)度軸的實(shí)現(xiàn)思路，這個(gè)功能在一些網(wǎng)站注冊(cè)賬號(hào)時(shí)一般都會(huì)用到，今天就通過(guò)實(shí)例代碼給大家詳細(xì)介紹下，感興趣的朋友跟隨小編一起看看吧
2021-05-05
jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果的相關(guān)資料,需要的朋友可以參考下
2015-07-07
JQuery each()嵌套使用小結(jié)
這篇文章主要介紹了JQuery each()嵌套使用，非常適合初學(xué)者,需要的朋友可以參考下
2014-04-04