用JS下拉菜单动画

Question

我的菜单没有动画： https://jsfiddle.net/sj0pycb7/5/

当我尝试添加类似的代码时，它无效。

;(function(){
var height = 1;
var intervalID;

var get = document.getElementsByClassName('dropdown');
var set = document.querySelector('.menu .dropdown ul');

get[0].addEventListener('mouseover', function(){
    startAnim();
}, false);
get[0].addEventListener('mouseout', function(){
    stopAnim();
    set.style.display = 'none';
}, false);

function startAnim(){
    intervalID = setInterval(increaseHeight, 10);
    set.style.overflow = 'hidden';
}
function stopAnim(){
    set.removeAttribute('style');
    set.style.display = 'none';
    clearInterval(intervalID);
    height = 1;
}
function increaseHeight(){
    if(height){
        height += 5;
        height++;
        set.style.height = height + 'px';
        set.style.display = 'inline-block';
    }
    if(height>210){
        height = 0;
        clearInterval(intervalID);
        set.removeAttribute('style');
        set.style.display = 'inline-block';
    }
}
})();

当我在下拉菜单锚点之间徘徊时，问题是事件'mouseout'执行（display：none）。删除边距和边框无济于事。

Answer 1

问题通过jQuery解决： https://jsfiddle.net/sj0pycb7/6/

ISR_HANDLER