jQuery 02类，动画-优快云博客

本文链接：https://blog.youkuaiyun.com/Big_Study_Father/article/details/105378648

1.样式操作;两类类操作

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        /* 点击之后加入该样式 */
        .current{
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <script>
        $(function(){
            //1. 不添加则返回当前值
            console.log($("div.a").css("width"));
            //2. 更改
            $("div.a").css("width","300px");
            //3. 同时设置多组 可不加引号
            $("div.a").css({
                "width":"400px",
                height:"600px",
                "backgroundColor":"red"
            });

            //4. 类样式
            // 添加类
            $("div.b").click(function(){
                //添加删除类
                //$(this).addClass("current");
                //$(this).removeClass("current");
                //切换类
                $(this).toggleClass("current");
            });

        })
    </script>

    <style>
        .ome{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div class="one">cme</div>
    <div class="ome">ome</div>
    <script>
        $(function(){
            var one =document.querySelector(".one");
            one.className="two";

            $(".ome").removeClass("ome");
            $(".ome").addClass("ame");
            $(".ome").text();
        });

    </script>

2. 动画效果;

在这里插入图片描述
显示与隐藏速度

    <style>
        .a{
            width: 200px;
            height: 500px;
            background-color: burlywood;
            display: block;
        }
        .b{
            width: 200px;
            height: 500px;
            background-color:darkblue;
            display: block;
        }


    </style>
</head>
<body>

    <!-- show([speed,easing,fn])
        speed:slow,normal,fast
        easing:切换效果swing|linear
        fn:回调函数，动画完成时执行
    -->

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>

    <div class="a"></div>
    <script>
        $(function(){
            $('button').eq(0).click(function(){
                // 设置切换效果,添加回调函数
                $("div").show(1000,function(){
                    $("div").text("sadasd");
                });
            })
            $('button').eq(1).click(function(){
                $("div").hide("slow");
            })
            $("button").eq(2).click(function(){
                $("div.a").addClass("b");
                $("div.a").removeClass("a");
            })
        })

    </script>

滑动

    <style>
        .a{
            width: 200px;
            height: 500px;
            background-color: burlywood;
            display: block;
        }
        .b{
            width: 200px;
            height: 500px;
            background-color:darkblue;
            display: block;
        }


    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>

    <div class="a"></div>
    <script>
        $(function(){
            $('button').eq(0).click(function(){
               $("div").slideDown();
            })
            $('button').eq(1).click(function(){
                $("div").slideUp();
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle(500);
            })
        })

    </script>

事件切换

    <style>
        .a{
            width: 200px;
            height: 500px;
            background-color: burlywood;
            display: block;
        }
        .b{
            width: 200px;
            height: 500px;
            background-color:darkblue;
            display: block;
        }


    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>

    <div class="a"></div>
    <script>
        $(function(){
            //事件切换
            //鼠标经过，离开的函数
            //.hover(func1(),func2())
            $("button").hover(function(){
                $("div").slideDown();
            },function(){
                $("div").slideUp();
            });
			
			//单函数写法，鼠标经过离开都会触发
			$("button").hover(function(){
                $("div").slideToggle(1000);
            });
        })

    </script>

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            margin: 300px;
            height: 500px;
            width: 500px;
            border: solid red 1px;
        }
        li{
            list-style-type: none;
            position: relative;
            float: left;
        }
        li img{

            width: 200px;
            height: auto;
            margin: 20px;
        }
    </style>

    <script src="./jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="./img/01.png" alt=""></a> </li>
            <li><a href="#"><img src="./img/02.png" alt=""></a> </li>
            <li><a href="#"><img src="./img/03.png" alt=""></a> </li>
            <li><a href="#"><img src="./img/04.png" alt=""></a> </li>
        </ul>

    </div>
    <script >
        $(function(){
            $("li").hover(function(){
                //鼠标移入，其他li标签的透明度为0.5
                //鼠标离开，其他的为1
                $(this).siblings().stop().fadeTo(400,0.5);
            },
            function(){
                $(this).siblings().stop().fadeTo(400,1);
            }
            )
        })
    </script>

</body>
</html>