jQuery垂直下拉菜单缓动

Question

我制作了一个垂直下拉菜单（宽度为100％）

当鼠标光标悬停在红色部分上时，

子菜单（宽度100％）必须显示为下拉...（灰色BG部分）

但它不起作用，我无法弄清楚出了什么问题......

有人可以帮我吗？

这是演示......

http://fiddle.jshell.net/B3tZj/

$(document).ready(function () {   
    $("#gnbMenu").hover(
      function () {$('#subWrap').animate({height: "show"}, 300, "easeInOutCubic");}, 
      function () {$('#subWrap').hide();}
    );
}); 

  

错误：未捕获TypeError：对象＃没有方法'easeInOutCubic'

Answer 1

您的动画错误地导致了easing easInOutCubic。

使用此：

function () {$('#subWrap').animate({height:"show",easing:"easeInOutCubic"}, 300)}, 

而不是：

function () {$('#subWrap').animate({height: "show"}, 300, "easeInOutCubic");},

演示here （您的代码已更正）

您可以使用.slideUp() / .slideDown()：

$(document).ready(function () { 
    $("#gnbMenu").hover(
      function () {$('#subWrap').slideDown();}, 
      function () {$('#subWrap').slideUp();}
    );   
}); 

演示here （有关幻灯片/滑动的建议）

修改

对你的评论提出问题：

$(document).ready(function () {
    $("#gnbMenu").on('mouseenter', function () {
        $('#subWrap').slideDown();
    });
    $("#subWrap").on('mouseleave', function () {
        $('#subWrap').slideUp();
    });
});

演示here

  

注意：此演示使用 .on（），需要jQuery 1.7 +