概述

通过jQuery中的基本动画方法，可以轻松为网页添加精彩的视觉效果，给用户带来全新的体验

jQuery中的动画

Show()和hide()方法

1.show()方法和hide()方法是jQuery中最基本的方法，hide()方法会将一个元素的显示设置为‘none’；

2.show()方法和hide()方法将同时更改元素的宽度、高度和透明度

3.当元素使用hide()方法时，将记录原始显示属性。调用show()方法时，将根据hide()方法存储的显示属性值显示元素

4.show()方法和hide()方法都可以接受指示移动速度的参数

$(. div 1 ')。toggle(function(){ $(. div 2 '))。隐藏(600)；}，function(){ $(. div 2 ')。表演(600)；});FadeIn()方法和fadeOut()方法

1.fadeOut()方法只降低指定时间段内元素的不透明度，而fadeIn()方法则相反

2.接受参数

$(. div 1 ')。toggle(function(){ $(. div 2 '))。法丁(600)；}，function(){ $(. div 2 ')。fade out(600)；});向上滑动()方法和向下滑动()方法

1.slideUp()方法和slideDown()方法只改变元素的高度。如果元素的显示属性值为“无”，则调用slideDown()方法时，元素将从上到下扩展，而slideUp()方法则相反

2.接受参数

$(. div 1 ')。toggle(function(){ $(this))。下一个()。slide up()；}，function(){ $(this)。下一个()。slide down()；});自定义动画方法动画()

语法：动画(参数、速度、回调)；

(1)参数：包含样式属性和值的地图

(2)速度参数2)速度：可选

(3)动画结束时3)回调：执行的函数，可选

1.基本用法

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'=50px '，height:'300px'}，600)；});2.多个动画

如果你想使用链式移动，你可以使用链式书写

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'350px'}，600)。动画({height:'300px'}，600)；});注意：如果在链写中使用css()方法，css()方法将不会被添加到运动队列中，而是直接执行，而无需等待上一个动画

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'350px'}，600)。动画({height:'300px'}，600)。css('边框'，' 10px纯黑')；});这个元素的边框将被添加到元素的开头，解决这个问题的方法是使用回调函数

如果您想同时移动，您可以编写要一起移动的值

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'350px '，height:'300px'}，600)；});回叫功能

回调函数适用于jQuery的所有动画效果方法

例如，为了解决链写中的css()属性可以直接执行的问题，可以使用回调函数

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'350px'}，600)。animate({height:'300px'}，600，function(){ $(. div 2 ')。css('边框'，' 10px纯黑')；});});停止动画，判断是否处于动画状态

1.停止元素动画

stop()方法接受两个参数

第一个参数为true或false，指示执行后是否清空动画队列。例如，当我们编写链动画时，如果第一个参数为真，当我们停止正在进行的动画操作后，以下动画操作将被清空。如果参数为false，则只会阻止当前动画，动画队列后的动画仍会执行。

第二个参数为真或假，指示是否将正在执行的动画跳转到最终状态。

2.确定元素是否处于动画状态

如果用户频繁执行动画()，将会出现动画累积。解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，则给元素添加新的动画。

if(！$(“div 1”)。is (':动画'){//添加动画}3。延迟动画

如果要延迟动画的执行，可以使用delay()方法

$(. div 1 ')。单击(function(){ $(. div 2 ')。动画({width:'350px'}，600)。延迟(1000)。animate({height:'300px'}，600，function(){ $(. div 2 ')。css('边框'，' 10px纯黑')；});});其他动画方法

1.slideToggle()方法

通过更改高度来切换匹配元素的可见性

$(. div 1 ')。单击(function(){ $(. div 2 ')。slide Toggle()；});2.fadeTo()方法

您可以逐步将元素的不透明度调整到指定值。此动画仅调整元素的不透明度

$(. div 1 ')。单击(function(){ $(. div 2 ')。fadeTo(600，0.5)；});3.fadeToggle()方法

通过不透明度切换匹配元素的可见性

$(. div 1 ')。单击(function(){ $(. div 2 ')。fadeTo(600，0.5)；});以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！