【特效】移入显示移出隐藏

移入显示移出隐藏的效果也是很常见的，例如：

如果页面有有多处地方有此效果，那么也可以合并到一块，只写一段js代码，只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单，用到了setTimeout()和clearTimeout()这两个方法。如果说隐藏的内容和切换的标签之间没有距离，那么只写两个hover()就可以了，如果有间距，那么就需要用到上面两个时间延迟的方法了。

说多无用，具体看代码吧：

html：

</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

转载于:https://www.cnblogs.com/xiaoxianweb/p/5445203.html

【特效】移入显示移出隐藏相关推荐

鼠标移入显示移出隐藏及反复闪烁问题
html代码 <div id="prev"></div><div id= ...
使用JavaScript实现鼠标移进按钮显示移出隐藏功能
开发工具与关键技术:DW.JavaScript实现功能作者:陈隆撰写时间:2019年01月17日下面使用简单的js实现移进显示移出隐藏常用的功能,先创建一个HTML文件,然后把需要的代码写到HT ...
Vue鼠标移入（悬停）显示-移出隐藏
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮:鼠标移出后,下载按钮隐藏. 最终效果如下: ①鼠标悬停 ②鼠标移出实现 ①布局 <div v-if="det ...
axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单
前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...
vue 移入显示_vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？...
@mouseover="showLike(i)" @mouseleave="hideLike(i)"> @click="likePoint(i) ...
【Vue】滚动条（设置滚动条、滚动条样式、鼠标移入滚动条显示移出滚动条隐藏....）
目录设置滚动条滚动条样式 1.隐藏滚动条 2.常用滚动条的样式的示例滚动条的应用 1.标签页的内容滚动,标签头部固定 2.鼠标移入显示滚动条,鼠标移出隐藏滚动条 3.实现导航栏鼠标上滑显示下滑隐 ...
Axure交互-鼠标移入移除显示与隐藏
Axure交互-鼠标移入移除显示与隐藏 1.场景描述画布布局为两个元件,按钮和图片.通过对按钮添加交互实现鼠标移入时图片显示,移出按钮时图片隐藏. 2.新增按钮移入移出交互 2.1.添加两个元件 2 ...
【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
为什么80%的码农都做不了架构师?>>> 我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记. 本特效主要采用fa ...
jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

【特效】移入显示移出隐藏

【特效】移入显示移出隐藏相关推荐

最新文章

热门文章