jQuery(七)、效果和动画

1 显示和隐藏

　　1、show([speed,[easing],[fn]])

　　显示隐藏的匹配元素。

　　参数：

　　(1) spend：三种预定速度之一的字符串('show','normal','fast')或表示动画时长的毫秒数值

　　(2) easing：用来指定切换效果，默认为swing,可用参数linear

　　(3) fn：在动画完成时执行的函数，每个元素执行一次

　　2、hide([speed,[easing],[fn]])

　　隐藏显示的元素。

2 滑动

　　1、slideDown([speed,[easing],[fn]])

　　通过高度变化(向下增大)来动态地显示所有匹配的元素，在显示完成后可选地触发一个函数。

　　2、slideUp([speed,[easing],[fn]])

　　通过高度变化(向下减小)来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个函数。

　　3、slideToggle([speed,[easing],[fn]])

　　通过高度变化来切换所有匹配元素的可见性(显示、隐藏)，在显示或隐藏完成后可选地触发一个函数。

3 淡入淡出

　　1、fadeIn([speed,[easing],[fn]])

　　通过透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个函数。

　　2、fadeOut([speed,[easing],[fn]])

　　通过透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个函数。

　　3、fadeTo([speed,opacity,[easing],[fn]])

　　把所有匹配元素的透明度以渐进方式调整到指定透明度，并在动画完成后可选地触发一个函数。

　　参数：

　　(1) opacity： 0 ~ 1之间表示透明度的数字。

　　4、fadeToggle([speed,[easing],[fn]])

　　通过透明度的变化来切换所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个函数。

4 自定义动画

　　1、animate(params[, spend] [,easing][, fn])

　　用于创建自定义动画。

　　该函数的关键在于指定动画形式及结果样式属性对象params。所有指定的属性必须用驼峰形式，比如marginTop代替margin-top。

　　参数：

　　(1) params：一组包含作为动画属性和终值样式属性和值得集合。如：{width:'90%',height:'90%',borderWidth:10}

// 每次向右移动50px
$("#right").click(function(){$(".block").animate({left: '+50px'}, "slow");
});

　　2、stop([clearQueue], [jumpToEnd])

　　停止所有在指定元素上正在运行的动画。

　　如果队列中有等待执行的动画(并且clearQueue没有设为true)，将马上执行所有动画。

　　参数：

　　(1) clearQueue：如果设置为true，则清空动画执行队列。可以立即结束动画。

　　(2) jumpToEnd：如果设置为true，则立即执行完动画队列。

5 设置

　　1、jQuery.fx.off

　　关闭页面上所有的动画。

　　2、jQuery.fx.interval

　　设置动画的显示帧速。

转载于:https://www.cnblogs.com/www-123456/p/10752974.html

jQuery(七)、效果和动画相关推荐

从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
jquery实现的圣诞节动画效果
jquery圣诞节倒计时网页动画模板 jQuery圣诞贺卡动画mp3音乐
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
008_效果和动画的Callback函数
1. Callback函数在当前效果或动画100%完成之后执行. 2. jQuery动画的问题 2.1. 许多jQuery函数涉及动画.这些函数也许会将speed或duration作为可选参数. 2. ...
jQuery图片自动轮转动画特效
本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...
前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术. 在他的帮助下,我们可以创建很多伟大的事情.丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效 ...
10个最佳jQuery Lightbox效果插件收集
http://www.qianduan.net/top-10-jquery-lightbox-scripts.html 您的位置:首页 > Ajax, Resource > 10个最佳jQ ...

jQuery(七)、效果和动画

jQuery(七)、效果和动画相关推荐

最新文章

热门文章