我正在使用现有模板，我已经获得了菜单，将类ulDisplay添加到列表项并在悬停时打开整个菜单。现在我想动画动作而不是只是弹出？菜单有四个级别，所以找到多个级别的孩子的线条非常重要。
这是脚本：
$(document).ready(function() {
$('ul#nav-primary').hover(function() {
$(this).addClass("ulDisplay");
$(this).find('ul,li').removeClass("ulHide");
$(this).find('ul,li').addClass("ulDisplay");
},
function() {
$('ul#nav-primary').removeClass("ulDisplay");
$('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').addClass("ulHide");
})
});
抱歉，我们应该早点补充一下：
我做了什么，但是没有工作：
$(document).ready(function() {
$('ul#nav-primary').hover(function() {
$(this).slideToggle('normal');
$(this).find('ul,li').removeClass("ulHide");
$(this).find('ul,li').addClass("ulDisplay");
},
function() {
$('ul#nav-primary').slideToggle('normal');
$('ul#nav-primary li').find('ul,li').removeClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').addClass("ulHide");
})
});
我也尝试过：
$(document).ready(function() {
$('ul#nav-primary').hover(function() {
//$(this).addClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').removeClass("ulHide");
$('ul#nav-primary li').find('ul,li').addClass("ulDisplay").stop(true, true).slideToggle(1000);
},
function() {
//$('ul#nav-primary').removeClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').removeClass("ulDisplay").stop(true, true).slideToggle(1000);
$('ul#nav-primary li').find('ul,li').addClass("ulHide");
})
});
最后：
$(document).ready(function() {
$('ul#nav-primary').hover(function() {
//$(this).addClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').removeClass("ulHide");
$('ul#nav-primary li').find('ul,li').addClass("ulDisplay", 1000);
},
function() {
//$('ul#nav-primary').removeClass("ulDisplay");
$('ul#nav-primary li').find('ul,li').removeClass("ulDisplay", 1000);
$('ul#nav-primary li').find('ul,li').addClass("ulHide");
})
});
这是HTML：
<div id="nav">
<h3><a href="/TemplatePackage/subtopic/B/index.html">Topic Homepage</a></h3>
<ul id="nav-primary">
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 4 - Item 1</a></li>
<li><a href="#">Level 4 - Item 2</a></li>
<li><a href="#">Level 4 - Item 3</a></li>
<li><a href="#">Level 4 - Item 4</a></li>
<!--<li><a href="/TemplatePackage/subtopic/B/basic_info/screening/level4.html#5">Level 4 - Item 5</a></li>-->
</ul>
</li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a><ul>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
</ul>
</div>
<div class="bottom"></div>
答案 0 :(得分：0)
jQuery UI（核心）使transition some properties when you add a class成为可能。
$(this).find('ul,li').addClass("ulDisplay",1000); // milliseconds
但是，如果您所做的只是显示和隐藏嵌套的UL块，请尝试使用.slideToggle()（或单独使用.slideDown()和.slideUp()），而不是添加和删除类。
答案 1 :(得分：0)
使用JQuery动画做你想做的事。尝试使用.toggle()功能：
$(document).ready(function() {
$('#primaryMenu').hover(function() {
$(this).toggle('fast');
//$(this).find('ul,li').removeClass("ulHide");
//$(this).find('ul,li').addClass("ulDisplay");
},
function() {
$('#primaryMenu').toggle('fast');
//$('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
//$('ul#nav-primary li').find('ul,li').addClass("ulHide");
})
});
<强>更新
使用不可更改的模板很多时候很好，但是当你紧张时有一些momentes。然而不是一切都丢失了！你可以使用javascript来改变代码，我在接受的答案中找到了这篇文章Pure javascript method to wrap content in a div你可以找到这段代码：
org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;
我个人觉得非常棒！并且要把它写在某处，因为我觉得它非常有用。希望它可以帮到你。
答案 2 :(得分：0)
好的，所以我要感谢你们两位的见解和帮助。这真的有助于找到答案。这是最终工作的代码：
$(document).ready(function() {
$('ul#nav-primary').find('li').hover(function() {
$(this).children('ul').slideDown('normal');
$(this).children('ul').removeClass('ulHide');
$(this).children('ul').addClass('ulDisplay');
$(this).children('ul').children('li').removeClass('ulHide');
$(this).children('ul').children('li').addClass('ulDisplay');
});
});
非常感谢EH_warch和Blazemonger
我发现的问题实际上在CSS中：观看此视频：http://jqueryfordesigners.com/video.php?f=animation-jump2.flv 这将有助于人们理解为什么动画会跳跃。