qq_23398171
flee-lether
采纳率100%
2016-05-29 11:12 阅读 3.0k
已采纳

jqueryclearInterval怎么无法清除setInterval

<!--html-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>主站</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="lib/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="lib/index.js" type="text/javascript"></script>
    <script type="text/javascript">
        var time1 = setInterval("lianimated1()", 0);
        var time2 = setInterval("lianimated2()", 0);
        $(function () {
            time1=cleananimated(time1,"ul.content_box_ul");
            time2=cleananimated(time2,"ul.visit_box_ul");
        });
    </script>
</head>

<body>
<!--------------------header---------------------->
<div id="header"><img src="images/header.jpg"></div>
<!----------------------nav----------------------->
<div id="nav">
    <ul>
        <li id="current_page"><a href="index.html">首页</a></li>
        <li><a href="introduce.html">个人简介</a></li>
        <li><a href="photolist.html">个人相册</a></li>
        <li><a href="articlelist.html">日志</a></li>
        <li><a href="careerlist.html">职业规划</a></li>
        <li><a href="worklist.html">作品展示</a></li>
    </ul>
</div>
<!--------------------content--------------------->
<div id="content">
    <div id="left_nav">
        <ul>
            <li><span><a class="title" href="index.html">首页</a></span></li>
            <li><span><a class="title" href="photolist.html">相册列表</a></span></li>
            <li><a href="sceneryphoto.html">旅游相册</a></li>
            <li><a href="cartoonphoto.html">动漫卡通</a></li>
            <li><a href="studyphoto.html">大学时光</a></li>
            <li><span><a class="title" href="careerlist.html">职业规划</a></span></li>
            <li><a href="#">大学生活</a></li>
            <li><a href="#">活动参与</a></li>
            <li><a href="#">实习打算</a></li>
            <li><span><a class="title" href="articlelist.html">我的日志</a></span></li>
            <li><a href="#">星湖游记</a></li>
            <li><a href="#">重庆一览</a></li>
            <li><a href="#">荷塘月色</a></li>
            <li><span><a class="title" href="introduce.html">个人简历</a></span></li>
            <li><a href="#">姓名</a></li>
            <li><a href="#">姓别</a></li>
            <li><a href="#">工作经验</a></li>
            <li><span><a class="title" href="worklist.html">作品展示</a></span></li>
            <li><a href="#">ps作品</a></li>
            <li><a href="#">HTML作品</a></li>
            <li><span><a class="title" href="#">经典瞬间</a></span></li>
        </ul>
    </div>
    <div id="right_content">
        <div id="photo">
            <ul>
                <li><a href="#"><img src="images/one.jpg"></a></li>
                <li><a href="#"><img src="images/two.jpg"></a></li>
                <li><a href="#"><img src="images/three.jpg"></a></li>
                <li><a href="#"><img src="images/four.jpg"></a></li>
            </ul>
        </div>
        <div id="title">
            <div id="acedemic_image"><a href="#"><img src="images/more.png"></a>日志动态</div>
            <div class="content_box">
                <ul class="content_box_ul">
                    <li><a href="#">我很不幸的过了英语四级啊</a><span>06-13</span></li>
                    <li><a href="#">一女生说:生命科学院院长演讲一场,彻...</a><span>04-13</span></li>
                    <li><a href="#">【转】班任为王,导员为皇,讲师为妃,...</a><span>03-11</span></li>
                    <li><a href="#">一,当你发现自己不再盲目的喜欢跟风似...</a><span>02-19</span></li>
                    <li><a href="#">很多人都认为节省能让他们的生活更保险...</a><span>02-10</span></li>
                    <li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>02-09</span></li>
                    <li><a href="#">【转】我现在终于明白,其实爱情没那么...</a><span>02-01</span></li>
                    <li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>01-19</span></li>
                    <li><a href="#">我很不幸的过了英语四级啊</a><span>06-13</span></li>
                    <li><a href="#">一女生说:生命科学院院长演讲一场,彻...</a><span>04-13</span></li>
                    <li><a href="#">【转】班任为王,导员为皇,讲师为妃,...</a><span>03-11</span></li>
                    <li><a href="#">一,当你发现自己不再盲目的喜欢跟风似...</a><span>02-19</span></li>
                    <li><a href="#">很多人都认为节省能让他们的生活更保险...</a><span>02-10</span></li>
                    <li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>02-09</span></li>
                    <li><a href="#">【转】我现在终于明白,其实爱情没那么...</a><span>02-01</span></li>
                    <li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>01-19</span></li>
                </ul>
            </div>
        </div>
        <div id="text">
            <div class="box">
                <div id="introduce">
                    <h3>个人简介</h3>
                    <p>我叫,<br>
                        来自。</p>
                </div>
            </div>
            <div class="box">
                <div id="career">
                    <h3>职业</h3>
                    <p>现学习软件工程,<br>
                        想从事软件开发。</p>
                </div>
            </div>
            <div class="box">
                <div id="love">
                    <h3>个人爱好</h3>
                    <p>喜欢古典文学,<br>
                        喜欢乒乓球。</p>
                </div>
            </div>
        </div>
        <div id="visit">
            <div id="visit_image"><a href="#"><img src="images/more.png"></a>最近发生</div>
            <div class="visit_box">
                <ul class="visit_box_ul">
                    <li><a href="#">爬高压线触电身亡&nbsp;身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
                    <li><a href="#">抗日雷剧再现神技:自行车飞拦火车似直升机</a><span>06-19</span></li>
                    <li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
                    <li><a href="#">爬高压线触电身亡&nbsp;身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
                    <li><a href="#">抗日雷剧再现神技:自行车飞拦火车似直升机</a><span>06-19</span></li>
                    <li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
                    <li><a href="#">爬高压线触电身亡&nbsp;身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
                    <li><a href="#">抗日雷剧再现神技:自行车飞拦火车似直升机</a><span>06-19</span></li>
                    <li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--------------------footer---------------------->
<div id="footer">
</div>
</body>
</html>

 <!--js-->
 var len1=0;
function lianimated1() {
    var $right_content=$("#right_content");
    var $box=$right_content.find("div.content_box");
    var $box_ul=$right_content.find("ul.content_box_ul");
    var height=$box.height();
    var ul_height=$box_ul.height();
    if(len1<(ul_height-height)){
        $box_ul.animate({marginTop: '-=' +10},"slow");
        len1+=10;
    }else{
        $box_ul.animate({marginTop: '+=' +len1},0);
        len1=0;
    }
}
var len2=0;
function lianimated2() {
    var $right_content=$("#right_content");
    var $box=$right_content.find("div.visit_box");
    var $box_ul=$right_content.find("ul.visit_box_ul");
    var height=$box.height();
    var ul_height=$box_ul.height();
    if(len2<(ul_height-height-60)){
        $box_ul.animate({marginTop: '-=' +10},"slow");
        len2+=10;
    }else{
        $box_ul.animate({marginTop: '+=' +len2},0);
        len2=0;
    }
}
function cleananimated(time,a) {
    var $right_content=$("#right_content");
    var $box_ul=$right_content.find(a);
    $box_ul.mouseover(function () {
        clearInterval(time);
    }).mouseout(function () {
        time1=setInterval("lianimated1()",50);
        return time1;
    });
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    danielinbiti danielinbiti 2016-05-29 11:49
    下面这个函数是有问题的
     function cleananimated(time,a) { 
        var $right_content=$("#right_content");
        var $box_ul=$right_content.find(a);
        $box_ul.mouseover(function () {
            clearInterval(time);
        }).mouseout(function () {
            time1=setInterval("lianimated1()",50);
            return time1;
        });
    }
    前面
     time1=cleananimated(time1,"ul.content_box_ul");
    time2=cleananimated(time2,"ul.visit_box_ul"); //这里有time2,但上面函数在Out的时候只会改变time1。也就是最后time1,time2都会执行lianimated1这个函数定时
    
    点赞 评论 复制链接分享
  • qq_23398171 flee-lether 2016-05-29 11:11

    css部分

     <!--css-->
    body,div,ul,li,a{
        margin:0;
        padding:0;
        color:#666;
        text-decoration:none;
        list-style:none;
    }
    #header{
        width:960px;
        height:227px;
        margin:0 auto;
    }
    #nav{
        width:960px;
        height:45px;
        margin:0 auto;
        background:url(../images/nav.jpg) no-repeat;
    }
    #nav ul{
        height:45px;
        list-style:none;
        line-height:45px;
        text-align:center;
        font-weight:bolder;
        font-family:'微软雅黑';
        font-size:12px;
        padding-left:110px;
    }
    #nav ul li{
        width:120px;
        height:45px;
        float:left;
    }
    #nav ul li a{
        color:#333;
        text-decoration:none;
    }
    #current_page{
        background:url(../images/pointer.png) no-repeat;
    }
    #nav ul li:hover a{
        background:url(../images/point.png) no-repeat;
        color:#FFF;
        display:block;
    }
    #footer{
        width:960px;
        height:57px;
        margin:0 auto;
        background:url(../images/footer.jpg) no-repeat;
        text-align:center;
        color:#333;
        font-size:12px;
        font-weight:bold;
        padding-top:28px;
    }
    #content{
        width:960px;
        height:547px;
        margin:0 auto;
        margin-top:5px;
    }
    #left_nav{
        width:180px;
        height:540px;
        float:left;
        background:url(../images/left_bg.jpg) no-repeat;
    }
    #left_nav ul{
        width:180px;
        height:17px;
        margin-top:20px;
    }
    #left_nav ul li{
        margin-left:35px;
        padding-bottom:2px;
        width:85px;
        height:17px;
        line-height:17px;
        margin-bottom:3px;
        font-family: '宋体';
    }
    #left_nav ul a{
        color:#666;
        text-decoration:none;
    }
    #left_nav ul li:hover a{
        font-weight:bolder;
        color:#0F3;
        display:block;
    }
    #left_nav ul li span .title{
        font-size:20px;
        font-weight:bold;
        text-decoration:none;
        color:#333;
        display:block;
        margin:8px 0;
    }
    #left_nav ul li:hover .title{
        color:#0F3;
        display:block;
    }
    #right_content{
        width:775px;
        height:540px;
        float:left;
        margin-left:5px;
        background:url(../images/bg.jpg) no-repeat;
    }
    #photo{
        width:343px;
        height:220px;
        float:left;
        padding:5px 5px;
    }
    #photo li{
        width:150px;
        list-style:none;
        float:left;
        position:relative;
    }
    #photo li img{
        width:150px;
        margin:0 5px;
        border:5px #FFFFFF solid;
    }
    #title{
        width:420px;
        height:230px;
        float:left;
    }
    #title .content_box{
        width:420px;
        height:205px;
        overflow: hidden;
        position: relative;
    }
    #title .content_box .content_box_ul{
        width:420px;
        height:410px;
        position: absolute;
        top: 0;
        left: 0;
    }
    #acedemic_image{
        width:355px;
        height:25px;
        margin-left:17px;
        background:url(../images/star.png) no-repeat;
        padding-left:17px;
        font-size:12px;
        margin-top:5px;
        font-weight:bold;
        padding-right:5px;
    }
    #acedemic_image img{
        float:right;
    }
    #title ul{
        font-size:12px;
    }
    #title ul li{
        width:390px;
        list-style:none;
        padding-left:10px;
        border-bottom:1px dotted #CCCCCC;
        margin:0 10px;
        padding-bottom:6px;
        padding-top:4px;
    }
    #title ul li a{
        text-decoration:none;
    }
    #title ul li span{
        float:right;
        font-size:12px;
        padding-right: 15px;
    }
    #text{
        width:773px;
        height:205px;
        margin-top:5px;
        float:left;
        font-family: '宋体';
    }
    #text .box{
        width:236px;
        height:165px;
        border:1px solid #CCC;
        float:left;
        margin:20px 8px;
        border-radius:20px;
    }
    #introduce{
        width:188px;
        height:139px;
        border:1px dotted #CCC;
        float:left;
        margin:8px 8px;
        border-radius:20px;
        background:url(../images/introduce.jpg) no-repeat;
        padding:5px 15px;
    }
    #career{
        width:188px;
        height:139px;
        border:1px dotted #CCC;
        float:left;
        margin:8px 8px;
        border-radius:20px;
        background:url(../images/career.jpg) no-repeat;
        padding:5px 15px;
    }
    #love{
        width:188px;
        height:139px;
        border:1px dotted #CCC;
        float:left;
        margin:8px 8px;
        border-radius:20px;
        background:url(../images/motion.jpg) no-repeat;
        padding:5px 15px;
    }
    #visit{
        width:773px;
        height:95px;
        margin-top:5px;
        float:left;
    }
    #visit .visit_box{
        width:773px;
        height:70px;
        overflow: hidden;
        position: relative;
    }
    #visit .visit_box .visit_box_ul{
        width:420px;
        height:270px;
        position: absolute;
        top: 0;
        left: 0;
    }
    #visit_image{
        width:720px;
        height:25px;
        margin-left:17px;
        background:url(../images/focus.png) no-repeat;
        padding-left:17px;
        font-size:12px;
        margin-top:5px;
        font-weight:bold;
        padding-right:5px;
        list-style:none;
    }
    #visit_image img{
        float:right;
    }
    #visit ul{
        font-size:12px;
    }
    #visit ul li{
        width:743px;
        list-style:none;
        border-bottom:1px dotted #CCCCCC;
        margin:0 10px 0 20px;
        padding-bottom:3px;
        padding-top:3px;
    }
    #visit ul li a{
        text-decoration:none;
    }
    #visit ul li span{
        float:right;
        font-size:12px;
        padding-right:15px;
    }
    
    点赞 评论 复制链接分享

相关推荐