jQuery垂直下拉菜单缓动

时间:2013-09-14 15:23:10

标签: jquery drop-down-menu easing

我制作了一个垂直下拉菜单(宽度为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'

1 个答案:

答案 0 :(得分: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 +