JavaScript按钮hover抖动效果

一般hover事件, 涉及到什么动画, 都很少用css的hover写了, 因为鼠标滑动到元素边缘, 会疯狂执行动画, 而且还是疯狂循环执行, 所以一般都用JavaScript控制
下面是一个有意思的鼠标划过按钮抖动效果, 特此记录一下

function JumpObj(elem, range, startFunc, endFunc) {
    var curMax = range = range || 6;
    startFunc = startFunc || function(){};
    endFunc = endFunc || function(){};
    var drct = 0;
    var step = 1;

    init();

    function init() { elem.style.position = 'relative';active() }
    function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
    function deactive() { elem.onmouseover = null }

    function jump() {
         var t = parseInt(elem.style.top);
        if (!drct) motionStart();
        else {
            var nextTop = t - step * drct;
            if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
            else if(nextTop < -curMax) drct = -1;
           else {
                var nextMax = curMax / 2;
                if (nextMax < 1) {motionOver();return;}
                curMax = nextMax;
                drct = 1;
            }
        }
        setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
     }
    function motionStart() {
        startFunc.apply(this);
        elem.style.top='0';
        drct = 1;
    }
      function motionOver() {
        endFunc.apply(this);
        curMax = range;
        drct = 0;
        elem.style.top = '0';
    }

    this.jump = jump;
    this.active = active;
    this.deactive = deactive;
}

JumpObj()函数有两个值, JumpObj(抖动元素, 抖动幅度), 比如JumpObj(box, 10);