jQuery006：jQuery动画效果

最新推荐文章于 2023-08-27 21:12:31 发布

一个码农

最新推荐文章于 2023-08-27 21:12:31 发布

阅读量327

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44699728/article/details/93491787

版权

jQuery动画框架的一些通用特性
每段动画都有时长,用来指定动画效果持续多长时间
可以使用毫秒数或字符串来指定时长
fast表示200ms
slow表示600ms
如果指定的字符串时长jQuery无法识别,默认时长为400ms
每个动画函数都可以接受第二个参数:回调函数,该函数会在动画执行完成之后自动执行
jQuery动画是”队列化”的,如果一个元素已经在动画过程中,再调用一个动画方法时,新动画不会立刻执行,而会延迟到当前动画结束后才执行.

先看一个简单的动画效果：
在这里插入图片描述
此时图片闪一下

jQuery定义了9个简单的动画方法用来隐藏和显示元素.
fadeIn()、fadeOut()、fadeTo()
show()、hide()、toggle()
slideDown()、slideUp()、slideToggle()
自定义动画： animate()
与简单动画方法实现的效果相比,使用animate()方法可以实现更多通用动画效果
Animate接收一个对象，该对象的属性名必须和css属性同名，属性值就是css属性的目标值

这个动画先向下100，再向右100，然后保持原位置
animate()方法
第一个参数是必需的,它必需是一个对象,它是动画属性对象。该对象的属性指定要变化的CSS属性和它们的目标值;animate()方法会将每个选中元素的这些CSS属性从初始值变化到指定的目标值.
第二个参数是可选的,它也是一个对象,它是动画选项对象。属性duration指明了动画持续时间,属性complete指定动画完成后自动执行的回调函数
注意,animate()动画只支持数值属性,对于颜色、字体等枚举属性是无法实现动画效果的

Animate的第二个可选参数也是一个对象，该对象有两个属性：duration控制动画事件长度（毫秒），complate指定动画完成后的回调函数
效果：

做一个鼠标进入动画，五个盒子，近一个向下移500然后复原到原位置

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width:100px;
            height:100px;
            border:#000000 solid 1px;
            position:absolute;
        }
    </style>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <script src="jquery-2.0.2.js"></script>
    <script>
        $(function() {
            //拉开间隔，距离左面依次100,200,300……
            var n = 1;
            $("div").each(
                function() {
                    this.style.left = n * 100  + "px";
                    n++;
                }
            );

            $("div").bind("mouseenter", function() {
                $(this).animate(//效果距离上面500px
                    {
                        top:"500px"
                    }
                    ,
                    {
                        duration:1000,//1秒完成
                        complete:function() {//回调距离上面10px
                            $(this).animate(
                                {
                                    top:"10px"
                                }
                            );
                        }
                    }
                );
            })
        });
    </script>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</body>
</html>

制作下拉菜单：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style>
        .menu {
            width:100px;
            height:20px;
            border:#000000 solid 1px;
            border-radius:5px;
            text-align:center;
            overflow:hidden;
            float:left;
        }
        .menu:hover {
            cursor:pointer;/*pointer代表光标是手，hand代表光标是箭头*/
        }

        .menu div:hover {/*进入class下的div的特效*/
            background-color:#000000;
            color:red;
        }
    </style>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <script src="jquery-2.0.2.js"></script>
    <script>
        $(function() {
            $(".menu").mouseenter(function() {
                // 先清空以前的动画队列。
                $(this).clearQueue();
                $(this).animate(
                    {
                        "height":"120px",
                    }
                );
            });
            $(".menu").mouseleave(function() {
                // 先清空以前的动画队列。
                $(this).clearQueue();
                $(this).animate(
                    {
                        "height":"20px"
                    }
                );
            });
        });
    </script>
</head>
<body>

<div style="position:absolute;">
    <div class="menu">
        <div>小吃</div>
        <div>冰封</div>
        <div>火锅</div>
        <div>凉皮</div>
        <div>烤肉</div>
    </div>
    <div class="menu">
        <div>小吃</div>
        <div>冰封</div>
        <div>火锅</div>
        <div>凉皮</div>
        <div>烤肉</div>
    </div>
    <div class="menu">
        <div>小吃</div>
        <div>冰封</div>
        <div>火锅</div>
        <div>凉皮</div>
        <div>烤肉</div>
    </div>
</div>
</body>
</html>

一个码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery006：jQuery动画效果

jQuery动画框架的一些通用特性每段动画都有时长,用来指定动画效果持续多长时间可以使用毫秒数或字符串来指定时长fast表示200msslow表示600ms如果指定的字符串时长jQuery无法识别,默认时长为400ms每个动画函数都可以接受第二个参数:回调函数,该函数会在动画执行完成之后自动执行jQuery动画是”队列化”的,如果一个元素已经在动画过程中,再调用一个动画方法时,新...
复制链接

扫一扫