jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例

httpkaidi

于 2021-12-07 19:27:36 发布

阅读量177

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121621765

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

  $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 200,
                    top: 500,
                    opacity: 0.4,
                    width: 500,
                }, 500)
            })
        })

王者荣耀手风琴效果案例（折叠卡片）

鼠标经过某个小li 有两步操作：
1.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .hero-box {
            width: 852px;
            margin: 100px auto;
            background-color: rgba(84, 28, 224, 0.5);
            overflow: hidden;
            padding: 10px;
        }
        
        p {
            margin-left: 20px;
            padding-top: 3px;
            color: #fff;
        }
        
        .hero-box ul {
            overflow: hidden;
            margin-top: 5px;
        }
        
        .hero-box li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .hero-box li.current {
            width: 224px;
        }
        
        .hero-box li.current .big {
            display: block;
        }
        
        .hero-box li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>


</head>
<script src="jquery.min.js"></script>

<body>
    <div class="hero-box">
        <p><b>周免英雄 (10月10日至18日)</b></p>
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/xiaoqiao1.jpg" class="small">
                    <img src="images/xiaoqiao2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#"><img src="images/zhangfei1.jpg" class="small">
                    <img src="images/zhangfei2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#"><img src="images/zhaoyun1.jpg" class="small">
                    <img src="images/zhaoyun2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/zhongkui1.jpg" class="small">
                    <img src="images/zhongkui2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/baili1.jpg" class="small">
                    <img src="images/baili2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/caocao1.jpg" class="small">
                    <img src="images/caoaco2.png" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/xiahou1.jpg" class="small">
                    <img src="images/xiahou2.png" class="big">
                </a>
            </li>
        </ul>
    </div>
    <script>
        $(function() {
            $(".hero-box li").mouseenter(function() {
                //1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }, 200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }, 200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        })
    </script>
</body>

httpkaidi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例

jQuery效果自定义动画效果animateanimate([params,[speed],[easing],[fn])（1）params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是复合属性则需要采取驼峰命名法 borderLeft ,其余参数都可以省略（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"（4
复制链接

扫一扫

专栏目录