怎样让onmouseover和out触发两个函数?

来源:3-1 JS缓冲动画

慕雪4427196

2016-03-18 10:03

是这样的,我按老师教的写了div的匀速运动函数,又写了div的透明度变化函数。我想把两个效果一起DOM给onmouseover,结果发现只能触发一个函数,谁写在前面触发谁。这怎么办啊,难道onmouse只能有一个动画效果吗?

-----------我是分割线-------------------------------------------------------------------

window.onload = function() {
    var close = document.getElementById('menu');

    function class1() {
        startMove(0),
        startOpactiy(100);
    }

    function class2() {
        startMove(-200),
        startOpactiy(30);
    }
    close.onmouseover = function() {
        class1()
    };
    close.onmouseout = function() {
        class2()
    }
}
var timer = null;
var alpha = 30;

function startMove(ev) {
    var close = document.getElementById('menu');
    clearInterval(timer);
    var speed = 0;
    timer = setInterval(function() {
        if (close.offsetLeft < ev) {
            speed = 10;
        } else {
            speed = -10
        }
        if (close.offsetLeft == ev) {
            clearInterval(timer)
        } else {
            close.style.left = menu.offsetLeft + speed + 'px'
        }
    }, 30)
}

function startOpactiy(target) {
    var close = document.getElementById('menu');
    clearInterval(timer);
    var speed = 0;
    timer = setInterval(function() {
        if (alpha > target) {
            speed = -10;
        } else {
            speed = 10;
        }
        if (alpha == target) {
            clearInterval(timer)
        } else {
            alpha += speed;
            close.style.filter = 'alpha(opacity=' + alpha + ')';
            close.style.opacity = alpha / 100;
        }
    }, 30)
}

写回答 关注

1回答

  • 慕雪4427196
    2016-03-18 10:14:23

    不好意思已经解决了,原来需要两个定时器。。。。哈哈哈哈哈

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题