gpt4 book ai didi

jquery - 使用slideup、向下滑动下拉菜单的jquery效果

转载 作者:行者123 更新时间:2023-12-01 03:51:30 25 4
gpt4 key购买 nike

我有一个下拉菜单,工作正常,但我想添加一些 jquery 效果,如动画、上滑、下滑、

目前我正在使用可见性隐藏和可见来显示 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;
}

任何帮助将不胜感激

最佳答案

您可以使用 .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/

关于jquery - 使用slideup、向下滑动下拉菜单的jquery效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8140650/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com