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

news/2024/7/1 5:23:32

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

 

 

如果页面有有多处地方有此效果,那么也可以合并到一块,只写一段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

 

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


http://lihuaxi.xjx100.cn/news/268355.html

相关文章

使用Vscode进行远程炼丹

使用pycharm的痛苦 作为一个机器学习爱好者&#xff0c;总是梦想有一台四个2080Ti显卡的主机进行炼丹&#xff0c;但是在公司基本只给一个笔记本&#xff0c;台式机在身边进行炼丹是一种奢望&#xff0c;那么如何链接远程的服务器进行炼丹呢&#xff1f; 刚开始我用pycharm进行…

Ubuntu操作系统

1. Ubuntu操作系统的介绍 Ubuntu操作系统是属于Linux操作系统中的一种&#xff0c;它是免费、稳定又可以拥有绚丽界面的一个操作系统 2. Ubuntu图形界面的介绍 任务栏 窗口操作按钮 窗口菜单条 任务栏效果图: 【Ubuntu的任务栏在屏幕的左侧&#xff0c;在按钮上按住鼠标不松…

爬虫不得不学之 JavaScript 函数对象篇

今天好像是情人节&#xff1f;所以最适合面向对象&#xff0c;JavaScript 也有对象&#xff0c;我们也可以随时面向对象&#xff0c;方便得很&#xff0c;那怎样才有对象呢&#xff1f;下面告诉你&#xff01; 1. 数组 数组&#xff0c;字面意思就是一堆数的组合&#xff0c;但…

医学图像分割:UNet++

点击上方“小白学视觉”&#xff0c;选择加"星标"或“置顶”重磅干货&#xff0c;第一时间送达导读使用一系列的网格状的密集跳跃路径来提升分割的准确性。在这篇文章中&#xff0c;我们将探索UNet: A Nested U-Net Architecture for Medical Image Segmentation这篇…

AI杀入斗地主领域,快手开发DouZero对标AlphaZero,干掉344个AI获第一

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶”重磅干货&#xff0c;第一时间送达来源丨量子位编辑丨极市平台导读 快手团队开发的斗地主AI命名为DouZero&#xff0c;意思是像AlphaZero一样从零开始训练&#xff0c;不需要加入任何人类知识。只用4个GPU&am…

计算机网络实验二交换机配置Cisco,思科实验1计算机和交换机的ip地址设置

实验1计算机与交换机IP地址设置1. 双击HostA&#xff0c; 输入用户名和入口令&#xff0c;键入"&#xff1f;"可以求得帮助。PCA login:rootPassword:linux设置 IP &#xff1a;[root#PCA root]# ifconfig eth0 10.65.1.1 netmask 255.255.0.0查看 IP &#xff1a;[r…

TensorFlow、PyTorch夹缝之下:后浪的进击和野望

作者 | Just出品 | AI科技大本营&#xff08;rgznai100&#xff09;“我发现&#xff0c;软件研发总会延期。”一流科技CEO袁进辉说。按照他的预期&#xff0c;深度学习框架OneFlow做两年就能开源给开发者检验&#xff0c;但时间向后延长了近一年半&#xff0c;“确实预计的不准…

使用C#的HttpWebRequest模拟登陆网站

很久没有写新的东西了&#xff0c;今天在工作中遇到的一个问题&#xff0c;感觉很有用&#xff0c;有种想记下来的冲动。 这篇文章是有关模拟登录网站方面的。 实现步骤&#xff1b; 启用一个web会话发送模拟数据请求&#xff08;POST或者GET&#xff09;获取会话的CooKie 并根…