jQuery 给我们封装了很多动画效果,其中最为常见的就是显示隐藏、滑动、淡入淡出和自定义动画。下面来看一下这些效果的使用方法。

fadein动画 jquery jquery常用动画制作_jquery

fadein动画 jquery jquery常用动画制作_jquery_02

 

 

 1.显示隐藏效果

show([speed,[easing],[fn]])

显示参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

hide([speed,[easing],[fn]])

隐藏参数
(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

toggle([speed,[easing],[fn]])

切换参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

2.滑动效果

fadein动画 jquery jquery常用动画制作_动画_03

slideUp([speed,[easing],[fn]])

 

上滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

stop()

(1)stop() 方法用于停止动画或效果。

(2)  注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

4.淡入淡出效果

fadeIn([speed,[easing],[fn]])

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

fadeToggle([speed,[easing],[fn]]

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

5.自定义动画 animate

animate(params,[speed],[easing],[fn])

自定义动画参数

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

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

键盘事件

fadein动画 jquery jquery常用动画制作_字符串_04

 

fadein动画 jquery jquery常用动画制作_动画_05

 

fadein动画 jquery jquery常用动画制作_动画_06

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div>afgadf</div>

 

 

<script>
        $(function() {
            var x = 0
            $(document).on("keydown", function(event) {

                switch (event.keyCode) {
                    case 39:
                        x += 5
                        $("div").css("left", x + "px")
                        break;
                }

            })
        })
 </script>

以上就可以实现小盒子按键盘的右键,就会向右移动