jQuery特效动画

jQuery提供了很多动画效果：

控制元素显示与隐藏
控制元素淡入和淡出
控制元素滑动
自定义动画

一. 控制元素显示和隐藏
以前可以通过css()方法改变元素的display属性的值达到显示（block）和隐藏（none）元素的目的。在jQuery中，提供了专门的方法控制元素的显示和隐藏，并且增加了动画效果。
show（）等同于

$(selector).css("display","block");

除了可以控制元素的显示外，还能定义显示元素时的效果，如显示速度
语法格式：

$(selector).show([speed],[callback]);

参数	说明
speed	可选，规定元素从隐藏到完全可见的速度，默认为0。可能值：毫秒，slow，normal，fast。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度，宽度，外边距，内边距和透明度
callback	可选，show函数执行完后要执行的函数

hide（）与show（）方法相反，参数也是一样，常成对使用。

二，切换元素可见状态
复合事件中的toggle（）方法，除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态，如果元素可见，单击切换后隐藏元素
关键代码：

<script type="text/javascript">
$(document).ready(function(){$("input[name=more_btn]").click(function(){$("li:gt(5):not(:last)").toggle();});});
</script><ul><li><a href="  ">某某</a></li>.........<li class="btn"><input name="more_btn"  type="button" value="展开或关闭菜单项"/></li>
</ul>

从代码运行效率考虑，使用toggle（）方法替代show（）和hide（）方法制作轮流切换元素的可见状态，更好。

比如京东的鼠标悬浮到一级菜单时，二级菜单显示，鼠标离开，二级菜单消失
关键代码

index=$(".inner-box").index($(this));//获取当前悬浮的index值
$(".erji-box div").eq(index).show();  //让相应二级内容显示
$(".erji-box div").eq(index).siblings().hide(); //所有相应二级的同辈元素隐藏

二, 控制元素淡入和淡出
fadeIn()方法控制元素淡入

$(selector).fadeIn([speed],[callback]);

参数和上面一样
fadeOut()方法控制元素淡出

切换元素出入状态
切换元素的淡入淡出状态的方法——fadeToggle()方法，如果元素已经淡出，fadeToggle()会向元素添加淡入效果，如果元素已经淡入，会向元素添加淡出效果，用法与toggle（）相同。

注意：jQuery中所有动画效果，都可以设置slow，normal，fast(0.6秒，0.4秒和0.2秒），这些要用双引号括起来，如fadeIn(“normal”)，而使用时间数值作为速度参数，不需要使用双引号。时间数值单位为毫秒。

三，控制元素滑动
slideDown(),slideUp()参数和上面一致，常用于选项卡，下拉菜单和提示信息等

<script type="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideDown("normal");});});
</script><div class="panel"><p>........</p><p>........</p><p>........</p></div><p class="flip">............</p>

同样也存在一个slideToggle()方法

四，自定义动画

animate（）用来创建自定义动画

$(selector).animate({params},speed,callback);

params必选，定义形成动画的CSS属性
后面的两个参数和前面的一样

jQuery特效动画相关推荐

HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
jQuery 特效：盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
jquery粒子动画鼠标视差js特效
下载地址 jquery粒子动画鼠标视差特效,很酷的粒子连线动画特效,鼠标移动的时候会有视差特效. dd:
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
2011最有用最潮的jQuery特效教程，前端们抱走吧~
越来越多的网页开发者们加入到开发jQuery的队伍中,今天给大家带来的是2011年非常新的jQuery教程,我们特地筛选区别于传统的javascript特效,还不赶快抱走!享受吧,可爱的程序员们! B ...
【完成发布】Lazy Line Painter – 非常有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
20款前端特效动画及源码
最近优化项目时看到一些实用的特效感觉还不错下面就分享给大家代码量过长的我就不展示了可以去在这里资源站源码部分预览下载 1.Loading加载动画在canvas画布上,我们动态绘制许多多边形, ...

jQuery特效动画

jQuery特效动画相关推荐

最新文章

热门文章