jquery中常用的动画方法有hide()和show()。

$(元素)。hide()这个代码可以等于这个元素. css('display '，' none ')

在hide(时间)和show(时间)中填写事件，可以消失，也可以慢慢出现。您可以修改元素的多种样式、高度、宽度和不透明度。

与隐藏和显示不同的另一组方法fadeIn()和fadeOut()在使用隐藏或显示时会更改网页的高度，但fadeIn和fadeOut不会。

$('#panel h5.head ')。toggle(function(){ $(this))。addClass('高亮')；$(这个)。下一个()。fade out(1000)；}，function(){ $(this)。removeClass('高亮')；$(这个)。下一个(' div。内容')。fade in(1000)；});另一组是向上滑动，向下滑动改变高度。

动画方法概述

动画队列

(1)一组元素上的动画效果。

a)当在animate()方法中应用多个属性时，动画会同时发生。

b)在链写中应用动画方法时，动画按顺序出现。

(2)多组元素的动画效果

a)默认情况下，动画都是同时发生的。

b)当动画模式以回调的形式应用时，动画按回调顺序发生。

另外，在动画方法上，要注意其他非动画的方法，比如css()方法。为了使这些非动画方法按顺序执行，我们需要在动画方法的回调函数中编写这些方法。

举一个动画的例子：

$(“# id”)。animate({ left : " 400 px "，top : " 300 px ")}，3000，function(){ $(this)。css("边框"，" 1px纯蓝")；});

如果希望动画停止，需要在animate()方法之前插入stop()方法

例如： $(“# ID”)。停止()。animate()注意stop中的两个参数。

当判断一个元素是否处于动画状态时：

$(元素)。is(“:动画”)；

JQuery可以很容易地给页面中的元素添加一些动态效果，并且可以使用其内置的效果或者定义自己的效果。

以下是一些内置的效果方法：

$.fn.show显示选定元素$.fn.hide隐藏选定元素$.fn.fadeIn淡入$.fn.fadeOut淡出$.fn.slideDown通过垂直滑动效果显示元素$.fn.slideUp通过垂直东效果隐藏元素$.fn.slideToggle显示滑动或隐藏滑动交互执行一个简单的示例：

$('h1 ')。show()；设置动画效果的持续时间

对于$.fn.show和$.fn.hide，默认时长为0，其他效果的默认时长一般为400毫秒。当然，您也可以设置自己的持续时间：

$('h1 ')。法丁(300)；//300ms $('h1 ')。fadeOut(“慢”)；//慢是jQuery内置的速度常数。默认速度常数都位于jQuery.fx.speeds对象中：

Speeds: {慢速： 600，快速： 200，//defaultspeed _ default3360 400}我们还可以扩展这个对象并添加我们自己常用的速度值：

jQuery.fx.speeds .炽燃=100；jquery . FX . speeds . turtle=2000；回叫功能

如果想要在动画效果结束后执行一些代码，可以将这些动画方法更改为回调函数：

$('div.old ')。fadeOut(300，function() { $(this))。移除()；});如果选择器中没有匹配的元素，就不会执行回调函数，所以在执行回调函数之前需要做一个判断：

var $ thing=$(' #不存在')；var CB=function(){ console . log(' done！');};if($ thing . length){ $ thing . fadein(300，CB)；} else { CB()；}自定义动画方法

jQuery中的$.fn.animate方法可以用来扩展我们的自定义动画，主要是通过animate方法设置元素的CSS属性来实现的。设置元素的CSS属性时，可以使用绝对值或相对值：

$ ('div.funtimes ')。animate ({left:'=50 '，opacity: 0.25 }，300，//duration function(){ console . log(' done！');//回调函数})；但是，当使用$.fn.animate创建自定义动画效果时，元素的颜色不能更改。如果你想创建彩色动画，你需要依赖其他颜色插件。动画的风格

jQuery内置了两种动画风格：摇摆和线性

$('div.funtimes ')。动画({ left : [ '=50 '，' swing' ]，不透明度： [ 0.25，' linear' ] }，300)；控制动画

JQuery提供了几种控制动画执行的方法：

$.fn.stop停止当前正在执行的动画

$.fn.delay将动画暂停一段时间：

$('h1 ')。表演(300)。延迟(1000)。隐藏(300)；

JQuery.fx.off:关闭动画的过度效果相当于将时长设置为0。