在jQuery中用于提供效果的方法有哪些

jQuery中的特效一般用于为网页添加动画。jQuery库有几种方法,我们可以用它们来为网页制作自定义动画。在这篇文章中,我们将看到jQuery中用于制作动画的所有方法。我们将讨论所有的方法,以及jQuery的代码片段和输出。

animate() 方法 :该方法用于对一些选定的CSS属性进行自定义动画。例如,高度、宽度等都可以用这个方法做动画。

例子:在这个例子中,我们对球体的大小进行动画处理。

Animate Method

输出:

clearQueue()方法:这个方法将被用来从队列中删除所有仍在等待运行的项目。例如,我们正在制作五个元素的动画,在这中间我们使用了.clearQueue,那么它将从这一点上停止动画。这里还有一点要说明的是,我们没有停止任何特定的动画,一旦一个动画开始,它将完成它的独立动画。

例子:在这个例子中,我们在多个阶段中对一个形状进行动画,并使用.clearQueue()方法停止动画。

输出:

delay() 方法:这个方法将用于在队列中存在的几个项目的动画之间做一个延迟。在这个方法的帮助下,我们将设置一个定时器,使每个动画都在这个特定的时间间隔内开始。

例子:在这个例子中,我们使用延迟方法来延迟每秒钟的动画。

输出:

dequeue()方法: .dequeue()方法用于从队列中排除任何特定函数,然后执行其余函数。例如,我们有一个有五个元素的队列,我们想从队列中删除第三个元素,那么我们将调用.dequeue()方法,dequeue方法将与queue方法一起调用。

例子:在这个例子中,形状的大小将被动画化,我们将使用一个函数在整个动画过程中改变一次形状的颜色,然后在dequeue方法的帮助下,我们将排除该函数,这样在队列中等待的其他函数将运行。

Dequeue method

GeeksforGeeks

输出:

fadeIn() 方法 : FadeIn means making any certain element visible.这个方法只是根据不透明度从0%到100%对该元素进行动画。

例子:在这个例子中,文本将在点击按钮时淡入。

Fade in method

GeeksforGeeks

输出:

fadeOut() 方法 :该方法的行为与fadeIn正好相反,该方法将使元素从不透明变成透明。

例子:在这个例子中,文本将在点击按钮时淡出。

Fade out method

GeeksforGeeks

输出:

fadeTo() 方法 : 我们可以用这个方法将任何特定的元素制作成一个特定的不透明度值。例如,如果我们想让任何隐藏的元素可见,但只有50%可见,那么我们就必须使用这个方法。

例子:在这个例子中,我们要把一个文本淡化为50%的不透明度。

FadeTo method

GeeksforGeeks

输出:

fadeToggle() 方法 : 我们可以用这个方法来做一个有淡入和淡出的切换动画。

例子:在这个例子中,在点击按钮时在淡入和淡出之间切换。

FadeToggle method

GeeksforGeeks

输出:

hide()方法:我们可以在这个方法的帮助下隐藏选中的元素。

例子:在这个例子中,我们在点击按钮时隐藏一个文本。

Hide method

GeeksforGeeks

输出:

queue()方法:该方法用于显示或操作正在特定元素上执行的函数队列。一个或多个函数可以在一个队列中,等待运行。一个元素可以有多个队列。

例子:在这个例子中,我们可以看到队列中有多少个方法。

Queue method

Total functions in the queue:

输出:

show() 方法 : 该方法将用于从隐藏状态显示所选元素。

例子:在这个例子中,我们在点击按钮时显示文本。

Show method

GeeksforGeeks

输出:

slideDown() 方法 : 一个元素将以向下滑动的动画显示。

例子:在点击按钮时,文本将以滑落动画的方式上升。

SlideDown method

GeeksforGeeks

输出: