下移动画

在使用JQ的fadeIn()的时候，发现了它是通过指定元素的透明度来实现的。然后就自己玩了一下JS动画制作

setTimeout

虽然这个函数名带timeout，但是设置的却是在指定时间之后异步执行任务。
其函数定义的伪代码为setTimeout(handler, timeout=0, *args)。

handler可以是一段JS代码的字符串，也可以是一个函数。
timeout是指定的时间，单位是毫秒。
args是传入handler的参数。
函数返回一个任务的唯一id(整数)，类似于进程号，该id可以用于删除任务，函数为clearTimeout(id)。

由于JS的设定，handler需要使用当前的外部变量时，需要将变量传入handler，否则会因为外部变量的变化导致程序无法正常运行。

setInterval

这个函数的使用方式和setTimeout一致，也有对应的清理函数clearInterval。但和setTimeout的区别是，它是每隔指定时间执行一次。

滑动动画，需要让元素不断地移动。思来想去也只有position: absolute;可以做到了。滑动层使用绝对定位，而它的父元素使用relative。

放置鼠标

滑动区域

<div id="example_0">
    放置鼠标
    <div id="example_1">
        滑动区域
    </div>
</div>

<style>
#example_0{
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    overflow: hidden;
    background-color: aliceblue;
}
#example_1{
    position: absolute;
    top: -200px;
    bottom: 200px;
    left: 0;
    right: 0;
    background-color: red;
}
</style>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var max_time = 1000,
    time_step = 50;
var task,
    init_size = parseInt($("#example_1").css("top").split("px")[0]);

$("#example_0").bind({
    "mouseleave": function () {
        clearInterval(task);
        $(this).children("#example_1").css("top", init_size + "px");
        $(this).children("#example_1").css("bottom", -init_size + "px");
    },
    "mouseenter": function () {
        task = setInterval(function (self) {
            let num_px = parseInt(self.children("#example_1").css("top").split("px")[0]);
            if (num_px != 0) {
                let num = num_px - init_size * time_step / max_time;
                self.children("#example_1").css("top", num + "px");
                self.children("#example_1").css("bottom", -num + "px");
            }
            else {
                clearInterval(task);
            }
        }, time_step, $(this));
    }
});
</script>