jquery动画效果

今天给大家介绍一下jQuery当中的几种动画效果。

. animate() 自定义动画
stop() 停止运行动画
fadeIn()/fadeOut()/fadeTo() 淡入淡出

1、animate() 自定义动画

（1）定义和用法：

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

（2）语法1：

animate(styles,speed,easing,callback)

 参数style： 必需。规定产生动画效果的 CSS 样式和值。speed：可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"easing：可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swinginearcallback：可选。animate 函数执行完之后，要执行的函数。

（3）语法2：

animate(styles,options)

 参数style： 必需。规定产生动画效果的 CSS 样式和值。callback：可选。规定动画的额外选项。可能的值：speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

（4）代码示例：

//改变 "div" 元素的高度：
$(document).ready(function() {$(".btn1").click(function(){$("#box").animate({height:"300px"});});
});

2、stop() 停止动画运行

（1）定义和用法：

stop() 方法停止当前正在运行的动画。

（2）语法：

stop(stopAll,goToEnd)

 参数
stopAll： 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd：可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用

（3）代码示例：

//停止当前正在运行的动画：
<script type="text/javascript">
$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},2000);$("#box").animate({height:100},2000);});$("#stop").click(function(){$("#box").stop();});
});
</script>

2、 fadeIn()/fadeOut()/fadeTo() 淡入淡出

2.1fadeIn()

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

（1.1）语法：

fadeIn(speed,callback)

 参数
speed： 可选。规定元素从隐藏到可见的速度。默认为 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback：可选。fadeIn 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡入效果来显示一个隐藏的 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){$(".btn").click(function(){$("p").fadeIn();});
});
</script>

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

2.2 fadeOut()

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

（1.1）语法：

fadeOut(speed,callback)

 参数
speed： 可选。规定元素从可见到隐藏的速度。默认为 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback：可选。fadeOut 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡出效果来隐藏一个 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("p").fadeOut()});
});
</script>

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

2. 3 fadeTo()

- fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

（1.1）语法：

fadeTo(speed,opacity,callback)

 参数
speed： 可选。规定元素从当前透明度到指定透明度的速度。可能的值：毫秒 （比如 1500）"slow""normal""fast"
opacity：必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback：可选。fadeTo 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡出效果来隐藏一个 <p> 元素：
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("p").fadeTo(1000,0.4);});
});
</script>

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

以上内容希望对您有所帮助！

jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出相关推荐

Android动画效果之自定义ViewGroup添加布局动画
Android动画效果之自定义ViewGroup添加布局动画前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢 ...
android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
android 自定义view 动画效果,Android自定义view----音乐播放动画
先给大家看一下效果,因为我也不知道这个东西具体叫什么,标题上面写的是"音乐播放动画",可能描述的不太准确. 效果图.gif 前言最近项目中做了一个音频播放的功能,播放条上需要一个 ...
android下雨动画效果,Android 自定义View之下雨动画
开始前先做个热身( ˘•灬•˘ ) 自己实现比较容易,但是到了要出博客整理思路,总结要点的时候就挠头,不知云所以,所以最简单的还是如果对安卓UI有兴趣的朋友可以加我好友互相探讨, 思路思路比较简单 ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...

jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出

jquery动画效果

今天给大家介绍一下jQuery当中的几种动画效果。

1、animate() 自定义动画

2、stop() 停止动画运行

2、 fadeIn()/fadeOut()/fadeTo() 淡入淡出

2.1fadeIn()

2.2 fadeOut()

2. 3 fadeTo()

以上内容希望对您有所帮助！

jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出相关推荐

最新文章

热门文章