jQuery效果的淡入淡出的案例

落日映苍穹つ 2023-07-08 06:59 38阅读 0赞

<style>
        * { 
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body { 
            background-color: black;
        }
        
        .box { 
            position: absolute;
            width: 780px;
            height: 520px;
            padding: 5px;
            border: 2px solid white;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 弹性盒子 */
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
        }
        
        .box .pic1 { 
            width: 250px;
            height: 250px;
        }
        
        img { 
            width: 250px;
            height: 250px;
        }
    </style>
    
    <body>
        <div class="box">
            <div class="pic1"><img src="img/1.jpg" alt=""></div>
            <div class="pic1"><img src="img/2.jpg" alt=""></div>
            <div class="pic1"><img src="img/3.jpg" alt=""></div>
            <div class="pic1"><img src="img/4.jpg" alt=""></div>
            <div class="pic1"><img src="img/5.jpg" alt=""></div>
            <div class="pic1"><img src="img/6.jpg" alt=""></div>
        </div>
        <script>
            $(function() { 
                // hover是鼠标经过和离开的复合事件,第一个function是鼠标经过事件
                // 第二个function是鼠标离开事件.
                $('.box > div').hover(function() { 
                    $(this).siblings().stop().fadeTo(100, 0.5);
                }, function() { 
                    $(this).siblings().stop().fadeTo(100, 1)
    
                })
            })
        </script>
    </body>

成果展示,用jQuery写的就是简单,  
![在这里插入图片描述][20200225151939671.gif]

[20200225151939671.gif]: https://img-blog.csdnimg.cn/20200225151939671.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 入门教程(6): 淡入淡出效果

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果： fadeIn() fadeOut() fadeToggle() fadeTo()

Bertha 。/ 2024年02月17日 14:10/ 0 赞/ 61 阅读

相关 jQuery效果的淡入淡出的案例

<style> { margin: 0; padding: 0; box-s

落日映苍穹つ/ 2023年07月08日 06:59/ 0 赞/ 39 阅读

相关 jquery淡入淡出_使用jQuery淡入淡出链接：dwFadingLinks

jquery淡入淡出 UPDATE: The jQuery website was down today which caused some issues with my e

不念不忘少年蓝@/ 2023年02月22日 01:27/ 0 赞/ 33 阅读

相关 jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate

jQuery效果显示隐藏效果 show()、hide()、toggle() show()显示效果 show([speed,[easing],[fn

曾经终败给现在/ 2023年01月02日 14:26/ 0 赞/ 203 阅读

相关图片的效果（淡入淡出。。。。。。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年06月07日 05:20/ 0 赞/ 300 阅读

相关 jQuery动画效果——淡入淡出

-------------------- 任务描述本关任务：掌握jQuery常见的动画效果——淡入淡出。效果图如下： ![206413][] 相关知识为了完成本关

桃扇骨/ 2022年04月05日 13:20/ 0 赞/ 371 阅读

相关网站页面的淡入淡出效果

在head部分加入一下内容： <META http-equiv=Page-Enter content=blendTrans(Duration=0.3)> <META h

╰半夏微凉°/ 2022年01月05日 14:21/ 0 赞/ 325 阅读

相关 jQuery淡出淡入

jQuery淡出淡入　　淡入就是让元素按照指定的时间出现 (显示) 　　淡入就是让元素按照指定的时间隐藏格式: 　　淡入: fadeIn(时间,函数) 　

你的名字/ 2021年12月24日 06:19/ 0 赞/ 399 阅读

相关 Jquery------淡入淡出效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淡入淡

今天药忘吃喽~/ 2021年12月10日 10:04/ 0 赞/ 402 阅读

相关 jQuery 效果 - 淡入淡出滑动的方法

jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn() 淡入

小鱼儿/ 2021年09月15日 07:38/ 0 赞/ 381 阅读