一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

jquery淡入淡出以及突出显示案例

1.淡入:fadeIn([[speed,[easing],[fn]])

2.淡出:fadeOut([[speed,[easing],[fn]])

3.淡入淡出切换:fadeToggle([speed,[easing],[fn]])

修改透明度

一.渐进方式调整到指定的透明度

fadeTo([[speed],opacity,[easing],[fn]])

二.效果参数

opacity透明度必须写，取值0~1之间
speed：三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值（如：1000）。
easing：(optional)用来指定切换效果，默认是"swing",可用参数"linear"。

自定义动画animate

1.语法

animate(params,[spead],[easing],[fn])

二.参数

params：想要更改的样式属性，以对象的形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要采取驼峰命名法boderLeft。其余参数都可以省略。
speed：三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值（如：1000）。
easing：(optional)用来指定切换效果，默认是"swing",可用参数"linear"。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

接下来依旧用代码的形式来举个例子

<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">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
    <style>
        div{
            /* 有了定位盒子才能左右跑 */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left:500,
                    top:300,
                    opacity:0.4,
                    width:500,
                },500);
            })
        })
    </script>
</body>
</html>

jquery属性操作

设置或获取元素的固有属性

所谓元素固有属性就是元素本身自带的属性

1.获取属性语法

prop("属性")

2.设置属性方法

prop("属性","属性值")

设置或获取元素的自定义属性

1.获取属性值

atter("属性")

2.设置属性值

atter("属性","属性值")

代码展示：

<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">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com/">百度</a>
    <input type="checkbox" name="" id="checked">
    <div index="1">我是自定义div</div>
    <script>
        $(function(){
            console.log($("a").prop("herf"));
            $("a").prop("title","一起百度");
            $("input").change(function(){
                console.log($(this).prop("checked"));
            })
            console.log($("div").attr("index"));
        })
    </script>
</body>
</html>

jquery淡入淡出效果以及自定义动画+属性操作