极客教程jQuery动画，幻灯片方法与实例
jQuery是一个非常强大的JavaScript框架。使用jQuery，我们可以为我们的网站或基于网络的应用程序添加特殊效果。
我们可以使用jQuery添加各种效果，如隐藏/显示、渐变效果、动画、回调等。
用于隐藏/显示、切换、淡化效果。
jQuery包含了几个函数库，提供了为网页添加动画的技术。这些包括简单的动画，标准的动画。
在这篇文章中，我们将学习如何在我们的网页上添加上述效果。
jQuery Animation:
在jQuery中，我们可以使用animate()方法产生各种类型的动画。这个方法可以在网页中产生简单到复杂的动画。使用动画，我们可以改变HTML元素的属性，如背景颜色，改变边界样式，改变导航属性，格式化字体属性等。
我们通过在方法的params参数中提供样式规则来应用对属性的改变。
语法:
$("selector").animate({params}, speed, callback);
其中,
- params参数指定了在执行animate()方法时要改变的CSS属性。它是必需的参数。
- speed参数指定应用效果的速度。它们只能接受这些值：”慢”、”快 “或毫秒。
- callback参数指定了执行animate()方法后要执行的函数。
让我们看看它在JavaScript代码中的实现：
在这段代码中，我们对矩形进行动画处理并将其形状改为圆形。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.3.1/jquery.min.js">
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<br/>
<button id="animate">Animate Me</button>
<script type="text/javascript">
("#animate").click(function() {
("div").animate({
width: "200px",
height: "200px",
borderRadius: "50%",
marginLeft: "210px",
marginTop: "70px",
},
2000,
);
});
</script>
</body>
</html>
输出:
在点击Animate Me之前
在点击了Animate Me之后
jQuery Slide:
使用jQuery，我们可以在我们的网页上添加向上或向下滑动的效果。幻灯片总是以div对的形式出现在网页中。有三种方法可以在我们的网页中添加滑动效果。这些方法如下。
- slideDown() :该方法使元素向下滑动。
语法:
$(selector).slideDown(speed,callback);
例子：在这个例子中，我们展示了下滑的效果。如果下滑面板被点击，HTML元素就会有相应的变化。
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
#p1, #f1 {
padding: 5px;
text-align: center;
background-color: white;
border: solid 2px green;
}
#p1 {
padding: 50px;
width:100px;
display:none;
color: green;
font-style: italic;
}
#f1 {
width:190px;
}
</style>
</head>
<body>
<h1 align="center">Silde Down Example</h1>
<center>
<div id="f1">Slide down Effect</div>
<div id="p1">Welcome to GeeksForGeeks.</div>
</center>
<script type="text/javascript">
("#f1").click(function(){
("#p1").slideDown("slow");
});
</script>
</body>
</html>
输出:
下降效应之前
下降效应之后
* slideUp()。该方法使元素向上滑动。
语法:
$(selector).slideUp(speed,callback);
例子：在这个例子中，我们展示了滑升效果。如果滑升面板被点击，HTML元素就会有相应的变化。
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
#p2, #f2 {
padding: 5px;
text-align: center;
background-color: white;
border: solid 2px black;
}
#p2 {
padding: 50px;
width:100px;
color: green;
font-style: italic;
}
#f2 {
width:190px;
}
</style>
</head>
<body>
<h1 align="center">Slide Up Example</h1>
<center>
<div id="f2">Slide up Effect</div>
<div id="p2">Welcome to GeeksForGeeks.</div>
</center>
<script type="text/javascript">
("#f2").click(function(){
("#p2").slideUp("slow");
});
</script>
</body>
</html>
输出:
在上升效应之前
上升效应之后
* slideToggle()。该方法使元素向上/向下滑动。
如果元件处于向上滑动的位置，它就会使其向下滑动。
如果元件处于向下滑动的位置，它就会使其向上滑动。
语法:
$(selector).slideToggle(speed,callback);
其中,
- speed参数指定应用效果的速度。它们只能接受这些值：”慢”、”快 “或毫秒。
- callback参数指定了在执行特定滑动方法后要执行的函数。
例子：在这个例子中，我们展示了滑升效果。如果滑升面板被点击，HTML元素就会有相应的变化。
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style type="text/css">
#p3 ,#f3 {
padding: 5px;
text-align: center;
background-color: white;
border: solid 2px green;
}
#p3 {
padding: 50px;
width:100px;
color: green;
font-style: italic;
}
#f3 {
width:190px;
}
</style>
</head>
<body>
<h1 align="center">Slide Up/Down Example</h1>
<center>
<div id="f3">Slide up/down Effect</div>
<div id="p3">Welcome to GeeksForGeeks.</div>
</center>
<script type="text/javascript">
("#f3").click(function(){
("#p3").slideToggle("slow");
});
</script>
</body>
</html>
输出:
效果之前
当第一次点击上/下条时
当第二次点击上/下条时
