1
我已经阅读了很多类似的问题，并修改了我的代码，但仍然无法让悬停功能正常工作。基本上，我开始我的函数cycleIt（）。当用户将鼠标悬停在ul.liList中的某个lis上时，我想停止cycleIt（）函数...显示与该特定li相对应的div ...并且当用户没有在ul上悬停时.liList，我想再次开始cycleIt函数。谢谢。无法停止或暂停悬停功能
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
$(document).ready(function() {
//setup initial screen
$(".paraStuff div:visible").hide();
$('ul.liList li:first-child').addClass('current');
$(".paraStuff div:eq(0)").fadeIn('3000');
//define function to cycle through li list and display corresponding bulleted list
function cycleIt(){
var nav = $("ul.liList");
var next = nav.find("li.current + li, li:first-child").last();
var myIndex = $(".current").index();
nav.find("li.current").removeClass("current");
$(".paraStuff div").eq(myIndex).fadeOut('3000');
if (myIndex == 7) {
$(".paraStuff div").eq(0).fadeIn('3000');
}
else {
$(".paraStuff div").eq(myIndex+1).fadeIn('3000');
}
next.addClass("current");
};//end cycleIt
setInterval(cycleIt,3000);//begin cycling through li list
$('ul.liList li').hover(function() {
clearInterval(cycleIt); //I want to stop the function
},
function() {
setInterval(cycleIt, 3000); //I want to start the function fresh again
});//end hover
});//end dom
</script>
</head>
<body>
<div id="content">
<div id="cycleStuff">
<div style="float:left;width:225px;">
<ul class="liList">
<li><a href="#">Systems Engineering</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Configuration Management</a></li>
<li><a href="#">Quality Assurance</a></li>
<li><a href="#">Software Engineering</a></li>
<li><a href="#">Hardware Engineering</a></li>
<li><a href="#">Information Assurance</a></li>
<li><a href="#">Test</a></li>
</ul>
</div><!--end div for pager-->
<div id="sbCycle"></div>
<div style="float:left;width:32px" height="244px"></div>
<div id="dotLine"></div>
<div class="paraStuff">
<div id='sye'>
<ul class="blueBox">
<li>Requirements Analysis</li>
<li>Trade-Off Studies</li>
<li>Specifications</li>
<li>Architecture</li>
<li>High Level Design</li>
</ul>
</div>
<div id="pm">
<ul class="blueBox">
<li>Planning</li>
<li>Scheduling</li>
<li>Budgeting</li>
<li>Team Leadership</li>
<li>Risk Management</li>
<li>Client Interface</li>
</ul>
</div>
<div id="cm">
<ul class="blueBox">
<li>Baseline Control</li>
<li>Status Accounting</li>
<li>Configuration Audits</li>
</ul>
</div>
<div id="qa">
<ul class="blueBox">
<li>Specification Compliance</li>
<li>Standards Adherance</li>
<li>Process Compliance</li>
</ul>
</div>
<div id="soe">
<ul class="blueBox">
<li>Design</li>
<li>Code and Unit Test</li>
<li>Component Integration</li>
<li>Component Test</li>
</ul>
</div>
<div id="he">
<ul class="blueBox">
<li>Design</li>
<li>Prototyping</li>
<li>Integration</li>
<li>Quality Control</li>
</ul>
</div>
<div id="ia">
<ul class="blueBox">
<li>Five Pillars of IA</li>
<li>DoD IA Processes</li>
<li>DoD C&A Standards</li>
</ul>
</div>
<div id="test">
<ul class="blueBox">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
</div><!--end paraStuff-->
</div><!--end cycle-->
</div><!--end content-->
</body>
</html>
如果我不是错，这将阻止任何动画是在悬停之前运行，因为OP想要清除间隔 – Rafay 2012-03-24 17:58:36
是的，此声明告诉停止它正在执行的所有操作，并执行“悬停”功能中描述的内容。也许这不是你需要的......对此抱歉。 – stzoannos 2012-03-24 18:05:33