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个回答

下面这个函数是有问题的
 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这个函数定时

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;
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问