【特效】移入显示移出隐藏
移入显示移出隐藏的效果也是很常见的,例如:
如果页面有有多处地方有此效果,那么也可以合并到一块,只写一段js代码,只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单,用到了setTimeout()和clearTimeout()这两个方法。如果说隐藏的内容和切换的标签之间没有距离,那么只写两个hover()就可以了,如果有间距,那么就需要用到上面两个时间延迟的方法了。
说多无用,具体看代码吧:
html:
<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>
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;}
js:
$(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);
});
});
});
预览效果:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2841.htm
源码下载:http://pan.baidu.com/s/1eRH3O9G
- 整理近期一些纯个人的作品
- 浅析Bootstrap缩略图组件与警示框组件
- mbatis Mapped Statements collection already contains value for...Mybatis
- java线程(7)——阻塞队列BlockingQueue
- jQuery编程基础精华(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- OSI七层模型与TCP/IP五层模型
- generator自动生成mybatis的xml配置、model、map
- 去掉Mybatis Generator生成的一堆 example
- Python学习笔记《Head first for Python》
- Win10系统下用户文件夹变得很大解决方案
- java 编程思想中的PriorityBlockingQueue 部分里对PrioritizedTask的排序没有显式调用collection的sort方法。而是通过take时做的这个动作
- 机器学习(Machine Learning)&深度学习(Deep Learning)资料汇总
- Json在java中的使用
- 锋利的jQuery ajax(二)
- PySide学习笔记第四章-消息框
- 一个程序员说
- Linux下使用NDK编译FFMPEG(libstagefright)
- iOS开发之静态库.a的制作教程
- 关于Ubuntu apt-get update 失败,问题解决
- 数据结构算法——单链表