鼠标移上div,此div下方伸展显示出另外一个div内容,但是我写了一个老是一上一下的来回动-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

鼠标移上div,此div下方伸展显示出另外一个div内容,但是我写了一个老是一上一下的来回动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>index</TITLE>
 
    <style type="text/css">
        #pic_box{
            width:100%;
            margin:0 auto;
        }
        #pic_box li{
            list-style: none;
            margin: 20px 20px 0 0;
            float: left;
            width: 80px;
            height: 80px;
            position:relative;
        }
        .selected{
            border-bottom:2px solid blue;
        }
        .div_operate{
            width: 80px;
            height: 30px;
            position:absolute;left:0;bottom:-80;
            text-align:center;
            overflow:hidden;
        }
        .div_folderDesc{
            width: 80px;
            height: 10px;
            line-height:10px;
            text-align:center;
        }
    </style>
 
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 
</HEAD>
 
<BODY>
 
    <ul id="pic_box">
        <li><image src="images/mail.png" alt="" width="80px" height="80px"/><div class="div_folderDesc">文件名1</div><div class="div_operate">提交 打回</div></li>
        <li><image src="images/mail.png" alt="" width="80px" height="80px"/><div class="div_folderDesc">文件名2</div><div class="div_operate">提交 打回</div></li>
    </ul>
 
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
 
var _selObj;
var cur;
 
$(document).ready(function(){
 
    $("#pic_box li").mouseover(function(){
        if(cur == $(this)) {
            return false;
        }
        if(cur!=null) {
            cur.animate({height:"80px"});
            cur.removeClass("selected");
        }
        $(this).addClass("selected");
        $(this).animate({height:"110px"});
        cur = $(this);
        _selObj = $(this);
    });
 
    $("#pic_box li").mouseout(function(){
        if(cur == $(this)) {
            return false;
        }
        if(cur!=null) {
            cur.animate({height:"80px"});
            cur.removeClass("selected");
        }
        cur = null;
        _selObj = null;
    });
 
});
 
 

展开
收起
a123456678 2016-07-08 15:05:44 1874 0
1 条回答
写回答
取消 提交回答
  • a123456678

    mousemove事件应该为mouseover事件,另外问题还存在的话,就试试在每次调用animate方法之前调用stop方法,具体参数请查看api

    2019-07-17 19:53:27
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载