jquery - 如何使用jquery在鼠标悬停时更改div的高度

Question

我试图在使用 jquery 将鼠标悬停在链接上时增加 div 的高度。 在这些链接之间转换时，div 的高度应保持不变，并且在第一次将鼠标悬停在链接上时应有延迟。 我还需要增加高度以从 0px 高到 400px 高过渡/动画。 这是我目前正在使用的代码，但它不起作用？？

 $(document).on("mouseenter", ".navDropLink", function() {
     console.log("MOUSEENTER");
     tab_id = $(this).attr('data-tab');
     tab_id_this = $(this).attr('id');
     setTimeoutConst = setTimeout(function(){
               $("#"+tab_id).animateAuto("height", 1000); 
      }, delay);
});
$(document).on("mouseleave", ".navDropLink", function() {
    clearTimeout(setTimeoutConst );
});

Answer 1

var delay=500, setTimeoutConst;
                    var tab_id, tab_id_this;

                    $(document).on("mouseenter", "#articlesLink", function() {
                         console.log("MOUSEENTER");
                         tab_id = $(this).attr('data-tab');
                         tab_id_this = $(this).attr('id');
                         setTimeoutConst = setTimeout(function(){
                                   $('#navFullDropdown').stop().animate({'height': '400px'}, 500);
                          }, delay);
                    });
                    $(document).on("mouseleave", "#articlesLink", function() {
                    $('#navFullDropdown').stop().animate({'height': '0px'}, 500);
                        clearTimeout(setTimeoutConst );
                    });