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

發(fā)布時(shí)間：2021-08-09 02:06:42 來源：億速云閱讀：162 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要講解了“jQuery怎么實(shí)現(xiàn)淡入淡出效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)淡入淡出效果”吧！

用jQuery完成淡入淡出效果前，我們先來認(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ù)

那我們把上述代碼放到整體代碼中看下效果

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

完整代碼如下

<!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" >
 </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>

感謝各位的閱讀，以上就是“jQuery怎么實(shí)現(xiàn)淡入淡出效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對jQuery怎么實(shí)現(xiàn)淡入淡出效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽