jquery显示隐藏特效
移入显示移出隐藏
如果说隐藏的内容和切换的标签之间没有距离，那么只写两个hover()就可以了，如果有间距，那么就需要用到setTimeout()和clearTimeout()这两个方法两个时间延迟的方法了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移入移出</title>
<style type="text/css">
/*CSS源代码*/
.jsMove_con{ display:none;}/*隐藏的内容*/
.box{ border:1px solid #096; margin:40px auto 0; padding:20px; width:500px;}
.jsMove_con{ width:500px; height:200px; background:#3C9; margin-top:20px;}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="jsMove box">
<input type="button" value="移入/移出1" class="jsMove_t">
<div class="jsMove_con">内容1</div>
</div>
<div class="jsMove box">
<input type="button" value="移入/移出2" class="jsMove_t">
<div class="jsMove_con">内容2</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
/*Javascript代码片段*/
$(document).ready(function(){
var move=$(".jsMove_t");
var timer=null;
move.each(function(){
var move_c2=$(this).next(".jsMove_con");
$(this).mouseover(function(){
move_c2.show();
clearTimeout(timer);
});
$(this).mouseout(function(){
timer=setTimeout(function(){move_c2.hide()},200);
});
move_c2.mouseover(function(){
clearTimeout(timer);
});
move_c2.mouseout(function(){
timer=setTimeout(function(){move_c2.hide()},200);
});
});
});
</script>
</body>
</html>.
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17