JavaScript 自定义jQuery动画效果

柒边形选手

已于 2022-02-12 15:40:51 修改

阅读量284

点赞数

分类专栏：笔记文章标签：动画 jquery javascript

于 2022-02-11 22:43:59 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122889915

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

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

    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,//移动到距左边500像素的位置
                    top: 300,//移动到距上边300像素的位置
                    opacity: .4,//透明度变化为0.4
                    width: 500//宽度变为500像素
                }, 500);
            })
        })
    </script>
</body>

折叠卡片效果（当鼠标经过显示大图片，隐藏原先的小图片）

<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

柒边形选手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 自定义jQuery动画效果

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

扫一扫