极客教程在jQuery中用于提供效果的方法有哪些
jQuery中的特效一般用于为网页添加动画。jQuery库有几种方法，我们可以用它们来为网页制作自定义动画。在这篇文章中，我们将看到jQuery中用于制作动画的所有方法。我们将讨论所有的方法，以及jQuery的代码片段和输出。
animate() 方法 :该方法用于对一些选定的CSS属性进行自定义动画。例如，高度、宽度等都可以用这个方法做动画。
例子：在这个例子中，我们对球体的大小进行动画处理。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Animate Method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#shape {
height: 100px;
width: 100px;
background-color: yellow;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="main">
<div id="shape">
</div>
</div>
<script>
(document).ready(function () {
// On taking the mouse to the shape,
// will increase the size of shape.
("#shape").mouseover(function () {
(this).animate({
height: "200px",
width: "200px"
});
});
// On taking out the mouse from the shape,
// will decrease the size of shape.
("#shape").mouseout(function () {
$(this).animate({
height: "100px",
width: "100px"
});
});
});
</script>
</body>
</html>
输出:
clearQueue()方法：这个方法将被用来从队列中删除所有仍在等待运行的项目。例如，我们正在制作五个元素的动画，在这中间我们使用了.clearQueue，那么它将从这一点上停止动画。这里还有一点要说明的是，我们没有停止任何特定的动画，一旦一个动画开始，它将完成它的独立动画。
例子：在这个例子中，我们在多个阶段中对一个形状进行动画，并使用.clearQueue()方法停止动画。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<!-- CSS code for the page -->
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#box {
height: 100px;
width: 100px;
background-color: rgb(229, 255, 0);
position: absolute;
top: 300px;
left: 0px;
display: none;
}
.btns {
margin: 10px;
}
#start,
#stop {
border-radius: 3px;
color: rgb(0, 0, 0);
font-family: Georgia, "Times New Roman", Times, serif;
height: 40px;
width: 100px;
outline: none;
border: 1px solid black;
}
#box.bluebox {
background-color: blue;
}
#box.greenbox {
background-color: green;
}
#box.redbox {
background-color: red;
}
#box.yellowbox {
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div id="box"></div>
<div class="btns">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
<!-- jQuery code goes here -->
<script>
var box = ("#box");
// Box will be visible
("#start").click(function () {
box.show(3000);
// New function added to the
// queue for changing the box
// color to the blue
box.queue(function () {
var box = (this);
box.addClass("bluebox");
box.dequeue();
});
box.animate({ left: 400 }, 2000);
// New function added to the
// queue for changing the box
// color to the green
box.queue(function () {
var box =(this);
box.addClass("greenbox");
box.dequeue();
});
box.animate({ top: 200 }, 2000);
// New function added to the
// queue for changing the box
// color to the red
box.queue(function () {
var box = (this);
box.addClass("redbox");
box.dequeue();
});
box.animate({ left: 0 }, 2000);
// New function added to the
// queue for changing the box
// color to the yellow
box.queue(function () {
var box =(this);
box.addClass("yellowbox");
box.dequeue();
});
box.animate({ top: 300 }, 2000);
// Here animation will be done
box.hide("slow");
});
// This function will stop the animation
// as well as clear the queue of functions
$("#stop").click(function () {
box.clearQueue();
box.stop();
});
</script>
</body>
</html>
输出:
delay() 方法：这个方法将用于在队列中存在的几个项目的动画之间做一个延迟。在这个方法的帮助下，我们将设置一个定时器，使每个动画都在这个特定的时间间隔内开始。
例子：在这个例子中，我们使用延迟方法来延迟每秒钟的动画。
<!DOCTYPE html>
<html>
<head>
<!-- jquery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#c1,
#c2,
#c3,
#c4,
#c5 {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
#c5 {
background-color: red;
}
#c4 {
background-color: rgb(0, 255, 0);
}
#c3 {
background-color: rgb(255, 251, 0);
}
#c2 {
background-color: rgb(0, 247, 255);
}
#c1 {
background-color: rgb(139, 1, 132);
}
</style>
</head>
<body>
<div class="main">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
<!-- jQuery code goes here -->
<script>
// As the page reloads animation will be start.
("#c5").delay(1000).animate({
height: "0px", width: "0px" });
("#c4").delay(2000).animate({
height: "0px", width: "0px" });
("#c3").delay(3000).animate({
height: "0px", width: "0px" });
("#c2").delay(4000).animate({
height: "0px", width: "0px" });
$("#c1").delay(5000).animate({
height: "0px", width: "0px" });
</script>
</body>
</html>
输出:
dequeue()方法： .dequeue()方法用于从队列中排除任何特定函数，然后执行其余函数。例如，我们有一个有五个元素的队列，我们想从队列中删除第三个元素，那么我们将调用.dequeue()方法，dequeue方法将与queue方法一起调用。
例子：在这个例子中，形状的大小将被动画化，我们将使用一个函数在整个动画过程中改变一次形状的颜色，然后在dequeue方法的帮助下，我们将排除该函数，这样在队列中等待的其他函数将运行。
<!DOCTYPE html>
<html>
<head>
<!-- jquery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Dequeue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#txt {
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="start">Start</button>
</div>
<!-- jQuery code goes here -->
<script>
("#start").click(function () {
var t =("#txt");
t.animate({ fontSize: "2rem" }, 1500);
t.animate({ fontSize: "3rem" }, 1500);
t.queue(function () {
var newColor = $(this);
newColor.css("color", "#29a329");
newColor.dequeue();
});
t.animate({ fontSize: "4rem" }, 1500);
t.animate({ fontSize: "5rem" }, 1500);
});
</script>
</body>
</html>
输出:
fadeIn() 方法 : FadeIn means making any certain element visible.这个方法只是根据不透明度从0%到100%对该元素进行动画。
例子：在这个例子中，文本将在点击按钮时淡入。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Fade in method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadein">Fade In</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is invisible.
("#fadein").click(function () {
("#txt").fadeIn(2000);
});
</script>
</body>
</html>
输出:
fadeOut() 方法 :该方法的行为与fadeIn正好相反，该方法将使元素从不透明变成透明。
例子：在这个例子中，文本将在点击按钮时淡出。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Fade out method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadeout">Fade Out</button>
</div>
<!-- jQuery code goes here -->
<script>
("#fadeout").click(function () {
("#txt").fadeOut(2000);
});
</script>
</body>
</html>
输出:
fadeTo() 方法 : 我们可以用这个方法将任何特定的元素制作成一个特定的不透明度值。例如，如果我们想让任何隐藏的元素可见，但只有50%可见，那么我们就必须使用这个方法。
例子：在这个例子中，我们要把一个文本淡化为50%的不透明度。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>FadeTo method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">
Half the opacity of text.
</button>
</div>
<!-- jQuery code goes here -->
<script>
// Text will be half visible and this
// animation will take 2 seconds
("#btn").click(function () {
("#txt").fadeTo(2000, 0.5);
});
</script>
</body>
</html>
输出:
fadeToggle() 方法 : 我们可以用这个方法来做一个有淡入和淡出的切换动画。
例子：在这个例子中，在点击按钮时在淡入和淡出之间切换。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>FadeToggle method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide/Show</button>
</div>
<!-- jQuery code goes here -->
<script>
("#btn").click(function () {
("#txt").fadeToggle(3000);
});
</script>
</body>
</html>
输出:
hide()方法：我们可以在这个方法的帮助下隐藏选中的元素。
例子：在这个例子中，我们在点击按钮时隐藏一个文本。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Hide method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide</button>
</div>
<!-- jquery code goes here -->
<script>
// Text will be hidden on button click
("#btn").click(function () {
("#txt").hide("fast");
});
</script>
</body>
</html>
输出:
queue()方法：该方法用于显示或操作正在特定元素上执行的函数队列。一个或多个函数可以在一个队列中，等待运行。一个元素可以有多个队列。
例子：在这个例子中，我们可以看到队列中有多少个方法。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Queue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
p {
color: #fff;
}
#box {
height: 10px;
width: 10px;
background-color: yellow;
border-radius: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main">
<p>Total functions in the queue: <i></i></p>
<div id="box"></div>
<button id="start">Start</button>
</div>
<!-- jQuery code goes here -->
<script>
(document).ready(function () {
("#start").click(function () {
var div = ("#box");
div.animate({ height: 100, width: 100 });
div.animate({ height: 500, width: 500 });
div.animate({ height: 550, width: 550 });
div.animate({ height: 0, width: 0 });
("i").text(div.queue().length);
});
});
</script>
</body>
</html>
输出:
show() 方法 : 该方法将用于从隐藏状态显示所选元素。
例子：在这个例子中，我们在点击按钮时显示文本。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Show method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Show</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is hidden.
("#btn").click(function () {
("#txt").show("slow");
});
</script>
</body>
</html>
输出:
slideDown() 方法 : 一个元素将以向下滑动的动画显示。
例子：在点击按钮时，文本将以滑落动画的方式上升。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>SlideDown method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Slide Down</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is hidden.
("#btn").click(function () {
("#txt").slideDown();
});
</script>
</body>
</html>
输出:
