jquery动画方法,请列举jQuery中常用的实现动画效果的方法

　　如何用jQuery实现动画？下面这篇文章介绍了jQuery实现预定义动画或者自定义动画的一些方法，希望对你有所帮助！

预定义动画

　　显示与隐藏

　　show()方法和hide()方法是jQuery中最基本的动画方法。具体语法如下：

　　$ element . show([速度]，[缓动]，[fn])；

　　$ element . hide([速度]，[缓动]，[fn])；Speed:三种预定速度(“慢”、“正常”或“快”)之一的字符串或代表动画持续时间的毫秒值。缓动：用于指定切换效果。默认值为“摆动”，可用参数为“线性”。Fn:动画完成时执行的函数，每个元素执行一次。/*

　　显示和隐藏

　　1.没有动画版本

　　* show()-显示

　　* hide()-隐藏

　　2.有一个动画版本——同时改变宽度和高度

　　*显示(速度，回拨)

　　*速度-动画执行的持续时间，以毫秒为单位。

　　* callback-动画执行后的回调函数。

　　*隐藏(速度，回拨)

　　*速度-动画执行的持续时间，以毫秒为单位。

　　* callback-动画执行后的回调函数。

　　*/

　　$(#box )。hide(2000，function(){

　　$(#box )。展示(2000年)；

　　});滑动式动画

　　slidelUp()方法和slideDown()方法通过改变高度值来实现动画效果。具体语法如下：

　　$element.slideUp([speed]，[easing]，[fn])；

　　$element.slideDown([speed]，[easing]，[fn])；Speed:三种预定速度(“慢”、“正常”或“快”)之一的字符串或代表动画持续时间的毫秒值。缓动：用于指定切换效果。默认值为“摆动”，可用参数为“线性”。Fn:动画完成时执行的函数，每个元素执行一次。/*

　　滑动动画-向上滑动()和向下滑动()

　　*注意-没有无动画版本(底层代码预定义了动画执行的持续时间)

　　* Effect-改变指定元素的高度

　　*/

　　$(#box )。slide up(3000)；

　　$(#box )。下滑(3000)；淡入淡出效果

　　fadeln()方法和fadeOut()方法通过改变透明度来实现动画效果。具体语法如下：

　　$element.fadeln([speed]，[easing]，[fn])；

　　$element.fadeOut([speed]，[easing]，[fn])；Speed:三种预定速度(“慢”、“正常”或“快”)之一的字符串或代表动画持续时间的毫秒值。缓动：用于指定切换效果。默认值为“摆动”，可用参数为“线性”。Fn:动画完成时执行的函数，每个元素执行一次。//更改元素的透明度

　　$(#box )。fadeOut(3000)；

　　$(#box )。fade in(3000)；动画切换效果

　　除了三种预定义的动画效果，jQuery还提供了三组动画切换效果：

　　Toggle ([speed]，[easing] [，fn])方法：如果元素可见，切换到隐藏；如果元素是隐藏的，请切换到可见。SlideToggle ([speed]，[easing] [，fn])方法：通过高度变化切换所有匹配元素的可见性，切换完成后可选触发一个回调函数。Fadtoggle ([speed]，[easing] [，fn])方法：通过不透明度的变化切换所有匹配元素的淡入淡出效果，动画完成后可选触发一个回调函数。$(#btn )。单击(函数(){

　　//$(#box )。toggle(3000)；

　　//$(#box )。slide toggle(3000)；

　　$(#box )。fadeToggle(3000)

　　})具有局限性

自定义动画

　　animate()方法

　　JQuery提供了anirmate()方法来完成自定义动画效果，可以通过两种方式使用：

　　$ element.animate (properties，duration，easing，complete)属性：一个具有CSS属性和值的对象，动画将根据这组对象移动。持续时间：一个字符串或数字决定动画将运行多长时间。缓动：一个字符串，指示过渡使用的缓动函数。Cormplete:动画完成时执行的回调函数。/*

　　Animate()方法自定义动画方法

　　1.animate(属性、持续时间、回调)

　　* properties-指示cSS的样式属性。

　　*在动画执行结束时设置样式属性值。

　　* duration-表示动画执行的持续时间，以毫秒为单位。

　　* callback-表示动画执行后的回调函数。

　　2 .动画(属性、选项)

　　* properties-指示cSS的样式属性。

　　*在动画执行结束时设置样式属性值。

　　* options-表示设置动画的相关参数。

　　* speed-表示动画执行的持续时间，以毫秒为单位。

　　* com alete-表示动画执行后的回调函数。

　　* queue-布尔值，设置是否添加到动画队列。

　　*/

　　/* $(#box )。动画({

　　宽度：100，

　　身高：100

　　},3000);

　　*/

　　$(#box )。动画({

　　宽度：100，

　　身高：100，

　　左：100

　　},{

　　速度：3000

　　});动画效果通过animate()方法实现，但不支持以下CSS样式属性：

　　backgroundcolorborderbuttoncolor . borderleftcolorborderrightcolorbordertopcolorcoloroutlinecolor并发与排队效果

　　并发效果：指多个动画效果同时执行。

　　$(#panel )。单击(函数(){

　　$(这个)。动画({

　　左：“500像素”，

　　高度：“200像素”

　　}, 3000);

　　};排队效应：指多个动画依次执行。

　　$(#panel )。单击(函数(){

　　$(这个)。动画({ left: 500像素 }，3000)。动画({ height: 200px }，3000)；

　　});队列：用于控制当前动画效果是并发还是排队；

　　/*

　　队列-用于控制当前动画效果是并发的还是排队的。

　　*参数

　　*错误-并发

　　*真-队列

　　*/

　　$(#box )。动画({

　　左：300

　　},{

　　持续时间：3000

　　}).动画({

　　最高：300

　　},{

　　时长：3000，

　　队列：真

　　});停止动画效果

　　JQuery提供了stop()方法来停止在指定元素上运行的所有动画，语法如下：

　　$element.animate([clearQueue][，goto end])；ClearQueue:如果设置为true，则队列被清除。您可以立即结束动画。

　　GotoEnd:让当前正在执行的动画立即结束，重置原来的显示和隐藏样式，调用回调函数等。

　　$(#stort )。单击(函数(){

　　$(#box )。动画({

　　左：600

　　},3000).动画({

　　最高：200

　　},3000)

　　});

　　$(#stop )。单击(函数(){

　　/*

　　*当stop()方法没有收到任何参数时-立即停止动画。

　　*停止(队列)方法的第一个参数

　　* false-表示当前动画停止，但队列中的动画继续执行。

　　* true-表示停止当前动画并清空动画队列。

　　* stop(queue，gotoend)方法的第二个参数

　　* false-不执行任何操作。

　　* true-表示停止当前动画并将指定元素设置为动画完成后的样式。

　　*/

　　$(#box )。停(真，真)；

　　});延迟执行动画

　　JQuery提供了delay()方法来设置延迟，以延迟队列中以下项目的执行。具体语法如下：

　　$element.delay(duration，queue name])；持续时间：延迟时间，以毫秒为单位。

　　QueueName:队列名词，默认为Ex，动画队列。

　　$(#box )。动画({

　　左：600

　　},3000).延时(1000)。动画({

　　最高：200

　　},3000);相关视频教程推荐：jQuery视频教程以上是讲如何使用jQuery实现动画的细节(详细代码讲解)。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。