我有一个下拉菜单,工作正常,但我想添加一些jquery效果,如动画,幻灯片,向下,
目前我正在使用visiblity hidden&可见以显示ul,我如何使用其他效果,下面是代码:
<script type="text/javascript">
$(document).ready(function () {
$('.ul-links > li').bind('mouseover', openSubMenu);
$('.ul-links > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
}; });
</script>
我尝试使用:$('ul', this).slideDown(100); $('ul', this).slideUp(100);
但没有成功
的CSS:
.quiklinks .ul-links li ul
{
position:absolute;
visibility: hidden;
margin: 0px;
padding-top:0px;
z-index: 1000;
top: 42px;
left:0px;
}
任何帮助都将受到高度赞赏
答案 0 :(得分:2)
您可以使用.animate()
功能而不是.css()
功能:
$(document).ready(function () {
$('.ul-links > li').bind('mouseover', openSubMenu);
$('.ul-links > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').animate({opacity : 1}, 500);
};
function closeSubMenu() {
$(this).find('ul').animate({opacity : 0}, 500);
};
});
.animate()
的文档可在此处找到:http://api.jquery.com/animate/
还有一些预先制作的动画:
$(this).find('ul').slideToggle(500);//http://api.jquery.com/slidetoggle/
$(this).find('ul').fadeToggle(500);//http://api.jquery.com/fadetoggle/
以下是使用.slideToggle()
和.fadeToggle()
的jsfiddle:http://jsfiddle.net/jasper/wFrpe/
答案 1 :(得分:1)
您可以使用.slideToggle()
或.fadeToggle()
。通过组合几个these functions可以实现高级效果,或者您可以使用jQuery动画插件来获得其他效果。
我还使用.hover()
<script type="text/javascript">
$(document).ready(function () {
$('.ul-links > li').hover(toggleMenu, toggleMenu);
function toggleMenu() {
$(this).find('ul').stop(true, true).slideToggle();
}
});
</script>
我注意到您还在样式表中使用了visibility:hidden;
。你应该删除它,因为它与jQuery使用显示样式修改是否可以看到元素的方式冲突。
你可以通过调用hide()来实现:
$('.ul-links > li').hide().hover(toggleMenu, toggleMenu);
奖金提示:
使用动画时,请始终在它们之前添加.stop(true, true)
,否则如果用户在上一个动画完成之前多次与其互动,您就会有怪癖。