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

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;