[JQuery 学习笔记] 淡入/ 淡出

最新推荐文章于 2022-08-21 17:46:10 发布

尉迟海棠

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量232

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/GYK0812/article/details/108697586

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. fadeInt() 淡入

2. fadeOut() 淡出

3. fadeToggle() 淡入/淡出自动切换

4. fadeTo() 设置褪色级别 0-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-2 淡入和淡出</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #group1 img{display:none;}
    </style>
    <script>
        $(function(){
            // 1. 淡入/ 渐显
            $('#fadeIn').click(function(){
                $('#group1 img:first').fadeIn('slow');
                $('#group1 img:eq(1)').fadeIn('fast');
                $('#group1 img:last').fadeIn(5000, function(){
                    alert('图片淡入显示成功~')
                })
            })

            // 2. 淡出/ 渐隐
            $('#fadeOut').click(function(){
                $('#group2 img:first').fadeOut('slow');
                $('#group2 img:eq(1)').fadeOut('fast');
                $('#group2 img:last').fadeOut(5000, function(){
                    alert('图片淡出显示成功~')
                })
            })

            // 3. 淡入淡出自动切换
            $('#fadeToggle').click(function(){
                $('#group3 img:first').fadeToggle('slow');
                $('#group3 img:eq(1)').fadeToggle('fast');
                $('#group3 img:last').fadeToggle(5000, function(){
                    alert('图片淡入/淡出显示成功~')
                })
            })

            // 4. 设置褪色级别0-1
            $('#fadeTo').click(function(){
                $('#group4 img:first').fadeTo('slow',  0.6);
                $('#group4 img:eq(1)').fadeTo('fast', 0.4);
                $('#group4 img:last').fadeTo(5000, 0.2, function(){
                    alert('图片设置褪色成功~')
                })
            })

        })
    </script>
</head>
<body>
    <div id='group1'>
        <button type="button" name="button" id="fadeIn">1. 淡入/渐显</button>
        <img src="image/1.jpg" alt="" width="100">
        <img src="image/2.jpg" alt="" width="100">
        <img src="image/3.jpg" alt="" width="100">
    </div>

    <div id="group2">
        <button type="button" name="button" id="fadeOut">2. 淡出/ 渐隐</button>
        <img src="image/1.jpg" alt="" width="100">
        <img src="image/2.jpg" alt="" width="100">
        <img src="image/3.jpg" alt="" width="100">
    </div>

    <div id="group3">
        <button type="button" name="button" id="fadeToggle">3. 淡入淡出自动切换</button>
        <img src="image/1.jpg" alt="" width="100">
        <img src="image/2.jpg" alt="" width="100">
        <img src="image/3.jpg" alt="" width="100">
    </div>

    <div id="group4">
        <button type="button" name="button" id="fadeTo">4. 设置褪色级别（0-1）</button>
        <img src="image/1.jpg" alt="" width="100">
        <img src="image/2.jpg" alt="" width="100">
        <img src="image/3.jpg" alt="" width="100">
    </div>
    
</body>
</html>