JQuery中效果以及自定义动画的学习

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

1. 效果

1.1 显示隐藏切换效果

显示语法规范

显示参数

参数都可以省略，无动画直接显示。
speed :三种预定速度之一的字符串(“slow”, "normal”, or"fast”)或表示动画时长的毫秒数值(如:1000)。
easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear"。
fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏

隐藏显示的元素

这个就是"hide( speed, [callback] ”的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

切换

语法规范:

1.2 滑动效果及事件切换

三个参数的定义如上

事件切换

over:鼠标移到元素上要触发的函数(相当于mouseenter )
out:鼠标移出元素要触发的函数(相当于mouseleave )

其中的两个参数分别代表鼠标经过和鼠标离开，而不用使用之前的mouseover和mouseout

1.3 淡入淡出和及突出显示

修改透明度

渐进方式调整到指定的不透明度

注意：在透明度设置时，速度以及透明度这两个参数的数值必须要写。

2. 自定义动画animate

params: :想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

</html>