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

【问题标题】：how to change the height of a div on mouseover with jquery如何使用jquery更改鼠标悬停时div的高度
【发布时间】：2015-11-29 13:13:05
【问题描述】：

当悬停在带有 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 );
});

【问题讨论】：

可以加个jsfiddle吗？
真的不知道如何......你知道我可以遵循的教程来实现这个
我希望制作一个类似于 mashable.com 上的菜单
1.转到jsfiddle.net 2.在左上角的框中添加您的HTML 3.在左下角的框中添加您的Javascript 4.在右上角的框中添加您的CSS。 5. 如果您想使用任何外部插件，如 jQuery，请从左侧面板的下拉列表中选择它。 6. 单击“运行”按钮。如果一切正常，那么您将在右下角的框中得到结果。 7. 点击“保存”按钮并分享网址
太感谢了，现在就这样做

标签： jquery html css jquery-animate delay

【解决方案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 );
                    });

【讨论】：