Question

我已经阅读了很多类似的问题并修改了我的代码，但仍然无法使悬停功能正常工作。基本上，我开始我的函数cycleIt（）。当用户将鼠标悬停在ul.liList中的一个lis上时，我想停止cycleIt（）函数...显示一个对应于该特定li的div ...当用户没有悬停在ul中的任何lis上时.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>

Answer 1

试

  ...//you code 
  var myInterval =  setInterval(cycleIt,3000);//begin cycling through li list
  ...//your code
  $('ul.liList li').hover(function() {
       clearInterval(myInterval); //clear the interval
    },
    function() {
      myInterval =  setInterval(cycleIt, 3000); //save reference to your interval in a var
    });//end hover

Answer 2

你应该尝试：

$('ul.liList li').stop().hover(function() {...});

Answer 3

感谢您的输入。使用@ 3nigma建议的内容和档案中的另一个片段，我将下面的代码组合在一起，效果非常好，尽管可能不是那么优雅......

<script type="text/javascript">
var timerId = null;
var myIndex = null;
$(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',function() {
            if (myIndex == 7) {
                $(".paraStuff div").eq(0).fadeIn('3000');
            }
            else {
                $(".paraStuff div").eq(myIndex+1).fadeIn('3000');
            }
        });//end callback on fadeout
        next.addClass("current");
    };//end cycleIt 
    timerId = setInterval(cycleIt,3000);//begin cycling through li list

$('ul.liList li').hover(function() {
    $('ul.liList').find("li.current").removeClass("current");
    if (!timerId) { 
    return; 
    } 
    clearInterval(timerId); //I want to stop the function
    timerId = null;
    var myHoverIndex = $(this).index();
    $(this).addClass('current');
    $(".paraStuff div:visible").hide();
        if (myIndex == 7) {
            $(".paraStuff div").eq(0).fadeIn('3000');
        }
        else {
            $(".paraStuff div").eq(myHoverIndex).fadeIn('3000');
        }
},
function() {
    $(this).removeClass('current');
    timerId = setInterval(cycleIt,3000);//begin cycling through li list
    $('ul.liList').mouseleave(function() {
        $(".paraStuff div:visible").hide();
        $('ul.liList li:first-child').addClass('current');
        $(".paraStuff div:eq(0)").fadeIn('3000');
    });//end mouseleave
});//end hover

});//end dom
</script>

无法在Hover上停止或暂停功能

3 个答案: