常用jquery鼠标事件和渐变动画效果
2019独角兽企业重金招聘Python工程师标准>>>
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的以下是具体事件的介绍:
(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
1 | $('p').click(function(){ |
2 | alert('click function is running !'); |
3 | }); |
(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
1 | $('p').dbclick(function(){ |
2 | alert('dbclick function is running !'); |
3 | }); |
(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
1 | $('p').mousedown(function(){ |
2 | alert('mousedown function is running !'); |
3 |
}); (4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。 |
1 | $('p').mouseup(function(){ |
2 | alert('mouseup function is running !'); |
3 | }).click(function(){ |
4 | alert('click function is running too !'); |
5 | }); |
(5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
(5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
(7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
1 | $('p').mouseenter(function(){ |
2 | alert('mouseenter function is running !'); |
3 | }); |
(8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。
1 | $('p').mouseleaver(function(){ |
2 | alert('mouseleaver function is running !'); |
3 | }); |
(7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
1 | $('p').hover(function(){ |
2 | alert('mouseenter function is running !'); |
3 | },function(){ |
4 | alert('mouseleaver function is running !'); |
5 | }); |
jquery animate的用法
animate(params,options)
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。
注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
返回值
jQuery
参数
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。
选项
duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
complete (Function) : 在动画完成时执行的函数
step (Callback) : Template:APICallback
queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
示例
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
--------------------------------------------------------------------------------
用600毫秒切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });
--------------------------------------------------------------------------------
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });
--------------------------------------------------------------------------------
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });
转载于:https://my.oschina.net/u/246088/blog/97832
常用jquery鼠标事件和渐变动画效果相关推荐
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果 转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html
- php响应鼠标,jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明 ...
- 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
- 深入学习jQuery鼠标事件
前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件 类型 鼠标事件共10类,包括click.contextmenu.dblclic ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
- JQuery 鼠标事件使用汇总
一.js鼠标事件 1.单机 :左键单机.右键单机 2.双击 3.鼠标按下.鼠标松开 4.鼠标移动 5.鼠标进入.鼠标移出 6.鼠标滚轮滚动 二.JQuery鼠标事件整理 1.单机 :左键单机.右键单机 ...
- Flutter SliverAnimatedOpacity 透明渐变动画效果
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
- Flutter透明度渐变动画Opacity实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程 掘金 EDU学院教程 知乎 Flutter系列文章 在Flutter 中实 ...
最新文章
- 尚硅谷spring和spring boot笔记_手机标准内存达12G,比笔记本电脑还高!可为何系统总能占一半?...
- 基于vue的颜色选择器vue-color-picker
- leetcode 之Median of Two Sorted Arrays(五)
- Flask框架从入门到精通之路由(三)
- CIKM 2021 | BH:面向Web级应用的基于二进制码的Hash Embedding
- 如何编写干净流畅的Web API测试
- java 幽灵引用_Java 幽灵引用的作用
- 【数据结构与算法】比较法分析查找算法与查找结构
- [Cacti] cacti监控mongodb性能实战
- 阿里云负载均衡SSL证书配置(更新)
- 树莓派摄像头,协议相关,人脸、车牌识别
- Android框架揭秘-Android Binder IPC笔记
- 502 proxy error解决方法_Homebrew安装、卸载、可能的报错及解决方案_Mac
- 2021年特种设备安全管理(全国特种设备安全管理人员模拟考试题库一)安考星
- 轻松升级各路硬件,简约时尚的大容量机箱,TT挑战者H6上手
- 董宝珍:巴菲特是如何选股的?——从底层逻辑看巴菲特核心重仓股的思路、原则和条件...
- ArcEngine连接地理数据库(20190702)
- Excel怎么设置每页都打印标题行?
- 我们造出了打破次元壁的锤子,然后呢?
- 大数乘法(快速傅立叶变换)下