鼠标移上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;
});
});
展开
收起
1
条回答
写回答
写回答
-
mousemove事件应该为mouseover事件，另外问题还存在的话，就试试在每次调用animate方法之前调用stop方法，具体参数请查看api
2019-07-17 19:53:27赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
