日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

jQuery實現(xiàn)動畫效果和導航欄動態(tài)顯示

作者：1900's 88 keys 更新時間： 2022-01-16 編程語言

效果

淡入淡出

  1. fadeOut([speed],[easing],[fn])通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)
    修改style中的opacity的值由display:block ~ 0 ~ 1
    參數(shù)：
    speed:預定字符串(“slow”,“normal”, or “fast”)或者指定數(shù)值
    easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
    fn:回調(diào)函數(shù)
// 點擊按鈕div慢慢淡出
   $('#btn1').click(function () {
       $("#div").fadeOut("slow");
   })
  1. fadeIn([speed],[easing],[fn])通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù).
    修改style中的opacity的值由1 ~ 0 ~ display:none
    參數(shù)：
    speed:預定字符串(“slow”,“normal”, or “fast”)或者指定數(shù)值
    easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
    fn:回調(diào)函數(shù)
// 點擊按鈕div慢慢淡入
   $('#btn2').click(function () {
       $("#div").fadeIn("slow");
   })
  1. fadeTo([[speed],opacity,[easing],[fn]])把所有匹配元素的不透明度以漸進方式調(diào)整到指定的不透明度，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù).
// 點擊按鈕div慢慢將可見度調(diào)整到0.5
   $('#btn3').click(function () {
     	$("#div").fadeTo("slow", 0.5);
   })
  1. fadeToggle([speed,[easing],[fn]])通過不透明度的變化來開關(guān)所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)
// 點擊按鈕div切換淡出/淡入
   $('#btn3').click(function () {
     	$("#div").fadeTo("slow", 0.5);
   })

在這里插入圖片描述

    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">調(diào)整可見度為0.5</button>
    <button id="btn4">淡入/淡出切換</button>
    <div id="div" style=" width: 100px; height: 100px; background-color:red">
    </div>

 $(function ($) {
     $('#btn1').click(function () {
         $("#div").fadeOut("slow");
     })
     $('#btn2').click(function () {
         $("#div").fadeIn("slow");
     })
     $('#btn3').click(function () {
         $("#div").fadeTo("slow", 0.5);
     }) 
     $('#btn4').click(function () {
         $("#div").fadeToggle("slow");
     })
 })

滑動

  1. slideUp([speed,[easing],[fn]])通過高度變化（向上減小）來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)
// 點擊按鈕div慢慢收縮
$('#btn2').click(function () {
    $("#div").slideUp("slow");
})
  1. slideDown([speed],[easing],[fn])通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)
// 點擊按鈕div慢慢展開
   $('#btn2').click(function () {
       $("#div").slideDown("slow");
   })
  1. slideToggle([speed],[easing],[fn])收縮/展開切換
// 點擊按鈕div收縮/展開切換
   $('#btn2').click(function () {
       $("#div").slideToggle("slow");
   })

	<button id="btn1">慢慢收縮</button>
    <button id="btn2">慢慢展開</button>
    <button id="btn3">收縮/展開切換</button>
    <div id="div" style=" width: 100px; height: 100px; background-color:red">
    </div>

 $(function ($) {
		$('#btn1').click(function () {
            $("#div").slideUp("slow");
        })
        $('#btn2').click(function () {
            $("#div").slideDown("slow");
        })
        $('#btn3').click(function () {
            $("#div").slideToggle("slow");
        }) 
 })

在這里插入圖片描述

基礎(chǔ)

  1. hide([speed,[easing],[fn]])顯示隱藏的匹配元素,通過同時修改元素寬度和高度和opacity來隱藏
	// 點擊按鈕div立即隱藏
	$('#btn1').click(function () {
	  	$("#div").hide();
	})
	// 點擊按鈕div慢慢隱藏
	$('#btn2').click(function () {
	    $("#div").hide("slow");
	})
  1. show([speed,[easing],[fn]])顯示隱藏的匹配元素,通過同時修改元素寬度和高度和opacity來隱藏
	// 點擊按鈕div立即隱藏
	$('#btn3').click(function () {
	  	$("#div").show();
	})
	// 點擊按鈕div慢慢隱藏
	$('#btn4').click(function () {
	    $("#div").show("slow");
	})

	<button id="btn1">立即隱藏</button>
    <button id="btn2">慢慢隱藏</button>
    <button id="btn3">立即顯示</button>
    <button id="btn4">慢慢顯示</button>
    <div id="div" style=" width: 100px; height: 100px; background-color:red">
    </div>

 $(function ($) {
		$('#btn1').click(function () {
            $("#div").hide();
        })
        $('#btn2').click(function () {
            $("#div").hide("slow");
        })
        $('#btn3').click(function () {
            $("#div").show();
        })
        $('#btn4').click(function () {
            $("#div").show("slow");
        })
 })

在這里插入圖片描述

自定義動畫

  1. animate(params,[speed],[easing],[fn])用于創(chuàng)建自定義動畫的函數(shù)
// div多屬性動畫移動
$('#btn1').click(function () {
    $("#div").animate({
        left: 200,
        top: 200,
        width: 200,
        height: 150
    }, 1000);
})
// div移動指定距離100px
$('#btn2').click(function () {
    $("#div").animate({
        left: "-=100px",
        top: "-=100px"
    }, "slow");
})
  1. stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在運行的動畫
// 停止div上正在運行的動畫
$('#btn3').click(function () {
       $("#div").stop();
 });
  1. delay(duration,[queueName])設(shè)置一個延時來推遲執(zhí)行隊列中之后的項目
// 在.slideUp() 和 .fadeIn()之間延時800毫秒
$('#foo').slideUp(300).delay(800).fadeIn(400);

在這里插入圖片描述

導航欄動態(tài)顯示效果

效果：
在這里插入圖片描述
代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery實現(xiàn)二級導航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 20px;
            color: #f4f1de;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
        }

        .shell {
            display: flex;
            justify-content: center;
        }

        .button,
        .portrait {
            background-color: #50536e;
            width: 170px;
            height: 65px;
            text-align: center;
            line-height: 65px;
            transition: .3s;
            cursor: pointer;
        }

        .portrait::before {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transform: translate(30px, -30px);
            background-image: url('../myhead.jpg');
            background-size: cover;
            border: 10px solid #fff;
        }


        .shell>li>ul {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(function ($) {
            $('.shell>li:has(ul)').hover(function () {
                // 動畫展開
                $(this).children('ul').stop().slideDown()
            }, function () {
                // 動畫收縮
                $(this).children('ul').stop().slideUp()
            })
        })
    </script>
</head>

<body>
    <ul class="shell">
        <li class="button">
            <span>Menu</span>
            <ul>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
            </ul>
        </li>
        <li class="button">
            <span>Dynamic</span>
        </li>
        <li class="portrait">
            <ul class="information">
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
            </ul>
        </li>
        <li class="button">
            <span>Collect</span>
            <ul>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
            </ul>
        </li>
        <li class="button">
            <span>Drop</span>
            <ul>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
                <li>dropdown-link</li>
            </ul>
        </li>
    </ul>
</body>

</html>

原文鏈接：https://blog.csdn.net/weixin_45660621/article/details/122294411

欄目分類
最近更新