移入显示移出隐藏
如果说隐藏的内容和切换的标签之间没有距离，那么只写两个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>
.
相关推荐
总结，本教程介绍了如何使用jQuery创建一个图片标题显示隐藏的特效。通过结合HTML、CSS和jQuery，我们可以实现鼠标悬停时标题自动显示，离开时标题自动消失的功能，提升网页的互动性和用户体验。这个特效适用于懒人...
**jQuery显示图片特效详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理和动画制作。在网页设计中，图片展示是至关重要的一个环节，而jQuery的图片特效能够为用户提供更加丰富的视觉...
使用jQuery实现时间轴特效的关键在于动态显示或隐藏里程碑的内容。例如，当鼠标悬停在某个里程碑上时，其内容可以滑动弹出： ```javascript $('.milestone').hover(function() { $(this).find('.milestone-content...
- 当用户滚动页面时，个人信息逐渐显示或隐藏（利用`.slideUp()`和`.slideDown()`）。 - 图片轮播效果，使用`.fadeToggle()`和定时器实现自动切换。 - 当鼠标悬停在联系信息上时，显示更多的细节（利用`.show()`和`....
本篇文章将聚焦于jQuery的十大经典特效，这些特效不仅展示了jQuery的魅力，也是许多Web开发者必备的技能。 一、淡入淡出（FadeIn/FadeOut） jQuery的FadeIn()和FadeOut()方法可以实现元素的渐显和渐隐效果，通过...
《jQuery超酷隐藏菜单放大显示特效插件解析与应用》 在现代网页设计中，交互性和用户体验成为了衡量网站质量的重要标准。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利，使得动态效果的...
总结来说，jQuery显示和隐藏DIV是网页动态效果的基础，通过简单的API调用可以轻松实现各种交互。这种技术广泛应用于菜单、侧边栏、内容区域的展开与收起，提升用户体验。了解并掌握这些技巧对于任何前端开发者都是...
根据提供的标题、描述和部分上下文内容，我们可以总结出本文主要关注的是如何使用jQuery实现一个鼠标悬停时显示隐藏内容的特效。虽然实际代码部分似乎包含了一些无法解析的字符，但我们可以基于标题和描述来详细解释...
为了实现搜索框的显示隐藏特效，我们可以这样写： ```javascript $("#searchToggle").click(function() { $("#searchBox").toggle(); }); ``` `#searchBox`是搜索框的ID，`toggle()`会根据当前状态切换元素的...
【标题】"鼠标经过图片显示详细信息jquery特效"是一种常见的网页交互设计，它利用JavaScript库jQuery来实现一种动态效果：当用户将鼠标悬停在图片上时，会显示出与该图片相关的详细信息，如文字描述、附加图片或其他...
可以设置`display:none`隐藏下级菜单，然后通过jQuery显示它们： ```css .dropdown-menu ul { display: none; } .dropdown-menu li:hover > ul { display: block; } ``` 现在，我们可以使用jQuery来添加动态...
**jQuery 内容隐藏式留言显示特效** 在网页设计中，动态效果往往能提升用户体验，让人眼前一亮。"jQuery_内容隐藏式留言显示特效"就是一种利用jQuery库实现的创新设计，它通过隐藏和显示留言内容，为用户提供了一种...
标题中的“jQuery网格马赛克动画显示隐藏图片特效插件.zip”揭示了这个压缩包包含一个基于jQuery的图片展示插件，它具有独特的马赛克动画效果，用于在网页上以网格形式展示并动态显示或隐藏图片。这种特效能够提升...
本资源“jquery默认隐藏鼠标点击显示文字菜单导航代码.zip”显然是一个包含jQuery实现的导航菜单示例代码，适用于网页设计和开发。 在网页设计中，菜单导航是至关重要的组成部分，它帮助用户在网站的不同页面之间...
首先，jQuery的弹出窗体特效通常涉及到创建一个可浮动的对话框或模态窗口，这些窗口可以用于显示信息、确认用户操作或提供额外的交互界面。这种效果可以通过使用`.show()`, `.hide()`, `.fadeIn()`, `.fadeOut()`等...
jQuery提供了slideToggle()方法，它能够使元素以滑动的方式隐藏或显示，模拟百叶窗开合的视觉效果。 “放大镜”功能在电商网站上非常常见，允许用户查看产品的细节。通过创建两个图像元素，一个大图和一个小图，...
**jQuery图片墙特效详解** jQuery图片墙特效是一种常见的网页设计技术，用于以独特且吸引人的方式展示一组图片。这种特效通常包含多个小图，形成一个整体的“墙”，当用户鼠标悬停在某个图片上时，该图片会被放大并...
- **导航按钮**：可以显示或隐藏导航点和左右切换按钮，通过pagination和prevNext选项设置。 - **触屏支持**：SuperSlide对触摸设备有良好的支持，用户可以通过滑动屏幕来切换图片。 3. **事件监听**： ...
jQuery网格马赛克动画显示隐藏图片特效插件是一种在网页中实现动态图像展示的技术，它通过将图片组织成网格，并采用马赛克效果进行动画处理，达到吸引用户注意力和提升用户体验的效果。这种特效通常用于网站的相册...
《jQuery幻灯片特效2010-7-20详解》 在Web开发领域，jQuery库因其简洁的API和强大的功能，深受开发者喜爱。其中，幻灯片效果是jQuery应用的一大亮点，它能为网站增添动态展示效果，提升用户体验。本篇文章将深入...