animation menu déroulant avec JS

Question

Il est mon menu sans animation: https://jsfiddle.net/sj0pycb7/5/

Lorsque je tente d'ajouter un code comme ça ne fonctionne pas correctement.

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

Le problème est que l'événement 'mouseout' exécute (display: none) quand je planant entre les ancres de menu déroulant. Supprimer la marge et les bordures n'aide pas.

Answer 1

problème est résolu avec jQuery: https://jsfiddle.net/sj0pycb7/6/

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