JS下拉菜单动画

Question

There is my menu without animation: https://jsfiddle.net/sj0pycb7/5/

When I try add a code like that it doesn't work correct.

;(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';
    }
}
})();

Problem is that event 'mouseout' executes(display:none) when I hovering between dropdown menu anchors. Removing margin and borders doesn't help.

Answer 1

Problem is solved with jQuery: https://jsfiddle.net/sj0pycb7/6/

;(function(){
$(document).ready(function() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.submenu').slideDown(200);
        },
        function(){
            $(this).children('.submenu').slideUp(200);
        }
    );
});
})();