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