3.jQuery滑动，淡入淡出和动画效果_jquery动画滑动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/145702513

<!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>
        .animate {
            position: absolute;
            background-color: red;
            width: 300px;
            height: 100px
        }
    </style>
</head>

<body>
    <div>
        <ul>
            按钮
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <ul>
            按钮
            <li>2</li>
            <li>2</li>
            <li>2</li>
        </ul>
        <ul>
            按钮
            <li>3</li>
            <li>3</li>
            <li>3</li>
        </ul>
    </div>

    <div>
        <p>淡入效果</p>
        <p>淡出效果</p>
        <p>淡入淡出切换</p>
        <p>修改透明度</p>
    </div>


    <div class="animate">动画效果</div>
</body>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
    // 1.滑动效果
    $(() => {
        //切换下拉滑动效果
        $("ul").children().slideUp()

        $("div>ul").hover(function () {
            //添加stop()同一时间只执行一个动画过渡效果，动画排队
            $(this).children("li").stop().slideToggle(300)
        }).css({
            backgroundColor: "red",
            width: "100px"
        })

    })


    // 2.淡入淡出，修改透明度
    $(() => {
        $("div p").css({
            backgroundColor: "blue",
            height: "100px",
            width: "100px"
        })
        // 渐隐
        $("div p").hover(function () {
            $(this).stop().fadeOut(1000)
        })
        // 渐显
        $("div p").mouseout(function () {
            $(this).stop().fadeIn(1000)
        })
        // 切换淡入淡出
        $("div p").hover(function () {
            $(this).stop().fadeToggle(1000)
        })

        // 修改透明度,实现遮罩效果
        $("div p").hover(function () {
            $(this).siblings().stop().fadeTo(1000, 0.5)
        }, function () {
            $(this).siblings().stop().fadeTo(1000, 1)
        })

    })


    //3.动画效果
    $(function () {
        $(".animate").hover(function () {
            $(this).stop().animate({
                //距离左边500
                left: 500,
                top: 300,
                width: 500
            })
        })

        $(".animate").mouseout(function () {
            $(this).stop().animate({
                left: 0,
                opacity: .5,
                top: 0
            })
        })
    })
</script>

</html>