jQuery实现动画效果和导航栏动态显示

最新推荐文章于 2022-10-11 11:41:22 发布

1900's 88 keys

最新推荐文章于 2022-10-11 11:41:22 发布

阅读量1.3k

点赞数 4

分类专栏：正在路上的前端攻城狮的烂笔记 # JavaScript # jQuery 文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/weixin_45660621/article/details/122294411

版权

正在路上的前端攻城狮的烂笔记同时被 3 个专栏收录

90 篇文章 2 订阅

订阅专栏

JavaScript

58 篇文章 4 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

效果

淡入淡出

fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
修改style中的opacity的值由display:block ~ 0 ~ 1
参数：
speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:回调函数

// 点击按钮div慢慢淡出
   $('#btn1').click(function () {
       $("#div").fadeOut("slow");
   })

fadeIn([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数.
修改style中的opacity的值由1 ~ 0 ~ display:none
参数：
speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:回调函数

// 点击按钮div慢慢淡入
   $('#btn2').click(function () {
       $("#div").fadeIn("slow");
   })

fadeTo([[speed],opacity,[easing],[fn]])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数.

// 点击按钮div慢慢将可见度调整到0.5
   $('#btn3').click(function () {
     	$("#div").fadeTo("slow", 0.5);
   })

fadeToggle([speed,[easing],[fn]])通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数

// 点击按钮div切换淡出/淡入
   $('#btn3').click(function () {
     	$("#div").fadeTo("slow", 0.5);
   })

在这里插入图片描述

    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">调整可见度为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");
     })
 })

滑动

slideUp([speed,[easing],[fn]])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数

// 点击按钮div慢慢收缩
$('#btn2').click(function () {
    $("#div").slideUp("slow");
})

slideDown([speed],[easing],[fn])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数

// 点击按钮div慢慢展开
   $('#btn2').click(function () {
       $("#div").slideDown("slow");
   })

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");
        }) 
 })

在这里插入图片描述

基础

hide([speed,[easing],[fn]])显示隐藏的匹配元素,通过同时修改元素宽度和高度和opacity来隐藏

	// 点击按钮div立即隐藏
	$('#btn1').click(function () {
	  	$("#div").hide();
	})
	// 点击按钮div慢慢隐藏
	$('#btn2').click(function () {
	    $("#div").hide("slow");
	})

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");
        })
 })

在这里插入图片描述

自定义动画

animate(params,[speed],[easing],[fn])用于创建自定义动画的函数

// 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");
})

stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画

// 停止div上正在运行的动画
$('#btn3').click(function () {
       $("#div").stop();
 });

delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目

// 在.slideUp() 和 .fadeIn()之间延时800毫秒
$('#foo').slideUp(300).delay(800).fadeIn(400);

在这里插入图片描述

导航栏动态显示效果

效果：
在这里插入图片描述
代码：

<!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实现二级导航</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>

1900's 88 keys

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
jQuery实现动画效果和导航栏动态显示

效果淡入淡出fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数修改style中的opacity的值由display:block ~ 0 ~ 1参数：speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn:回调函数// 点击按钮div慢慢淡出 $('#b
复制链接

扫一扫