1
私は多くの似たような問題を読んでいますが、自分のコードを変更しましたが、ホバー機能を正しく動作させることができません。基本的に、私は関数cycleIt（）を開始します。ユーザーがul.liList内のlisの上を移動するとき、私はcycleIt（）関数を停止したい...その特定のliに対応するdivを表示し、ユーザーがul内の任意のlis上をホバリングしていないとき.liList、私はcycleIt関数を再開したいと思います。ありがとうございました。Hoverで機能を停止または一時停止することに問題があります
<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>
... 3nigma @提案し、それができるよう、多分エレガントされていないが、私は、非常にうまく動作します一緒に次のコードを入れてアーカイブから別のスニペット何 使用しているすべてのアニメーションを停止することホバリング前に実行します。OPが間隔をクリアしたい場合は、 – Rafay
はい、このステートメントは、実行しているすべての処理を停止し、「ホバー」機能に記載されていることを実行します。たぶんそれはあなたが必要なものではありません...それについて申し訳ありません。 – stzoannos