mouseenter和mouseleave事件实现滑动

<style>.dj,.xihua {width: 600px;height: 60px;margin: 0 auto;background-color: rgba(247, 250, 65, 0.212);text-align: center;padding: 5px;border: 1px solid rgb(107, 107, 107);line-height: 60px;}.xihua {height: 200px;line-height: 200px;display: none;}
</style><body><div class="dj" id="x">点击该元素下滑 </div><div class="xihua" id="xi">元素显示完毕</div><script>$(function() {$("#x").mouseenter(function() {$('#xi').slideDown(1000)})$("#x").mouseleave(function() {$('#xi').slideUp(1000)})})</script>
</body>

hover事件实现滑动

<style>.dj,.xihua {width: 600px;height: 60px;margin: 0 auto;background-color: rgba(247, 250, 65, 0.212);text-align: center;padding: 5px;border: 1px solid rgb(107, 107, 107);line-height: 60px;}.xihua {height: 200px;line-height: 200px;display: none;}
</style><body><div class="dj" id="x">点击该元素下滑 </div><div class="xihua" id="xi">元素显示完毕</div><script>$(function() {$("#x").hover(function() {$('#xi').slideDown(1000);}, function() {$('#xi').slideUp(1000)})})</script>
</body>

或者

<style>.dj,.xihua {width: 600px;height: 60px;margin: 0 auto;background-color: rgba(247, 250, 65, 0.212);text-align: center;padding: 5px;border: 1px solid rgb(107, 107, 107);line-height: 60px;}.xihua {height: 200px;line-height: 200px;display: none;}
</style><body><div class="dj" id="x">点击该元素下滑 </div><div class="xihua" id="xi">元素显示完毕</div><script>$(function() {$("#x").hover(function() {$('#xi').slideToggle(1000)})})</script>
</body>

jQuery 事件实现滑动示例相关推荐

静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端移动端代码左侧导航 *{ margin:0; padding:0; } #header ...
jQuery事件动画（四）
目录一,jQuery事件常见的DOM事件有加载DOM的两种方式 1window.onload 2.jquery 绑定事件的两种方式 1.element.on/bind(event,functio ...
2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
jquery事件委托_jQuery事件委托
jquery事件委托 jQuery使JavaScript中的事件处理变得容易. 但是,定义的事件处理程序越多,使用的内存就越多,最终可能会降低性能并导致UI变慢. 本文探讨事件委托如何帮助防止这种情况 ...
jQuery事件，对象以及插件
回顾 1 基本使用 2 jquery 选择器 3 筛选器过滤查找串联 4 DOM 操作内部插入 append()appendTo()prepend()prependTo() 外部插入 afte ...
HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...

jQuery 事件实现滑动示例

mouseenter和mouseleave事件实现滑动

hover事件实现滑动

jQuery 事件实现滑动示例相关推荐

最新文章

热门文章