jQuery-淡入淡出和幻灯片方法
在本教程中，我们将学习jQuery中不同的淡入淡出和滑动方法。
Fade
我们使用不同的淡入淡出方法为元素的不透明度属性设置动画。
以下是我们将在本教程中讨论的淡入淡出方法。
- fadeIn()
- fadeOut()
- fadeTo()
- fadeToggle()
fadeIn()
我们使用fadeIn()方法将元素淡化为不透明。
在以下示例中，我们有一个ID为" sample-div1"的div。
div最初是隐藏的，我们将使用fadeIn()方法使其淡入。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
CSS
#sample-div1 {
display: none;
}
jQuery
$("#sample-div1").fadeIn();
我们还可以通过传递持续时间(以毫秒为单位)来控制动画中淡入淡出的持续时间。
我们也可以在淡入完成后运行一个函数。
语法
$(selector).fadeIn(duration, complete);
在下面的示例中，我们将在2000毫秒内淡入id为" sample-div1"的div。
div最初是隐藏的。
淡入淡出动画完成后，我们将打印"完成！"。
在浏览器控制台中。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
CSS
#sample-div1 {
display: none;
}
jQuery
$("#sample-div1").fadeIn(2000, function(){
console.log("Done!");
});
fadeOut()
这与fadeIn方法相反，它将通过设置其opacity属性的动画来隐藏该元素。
语法
$(selector).fadeOut(duration, complete);
持续时间和完整函数都是可选的。
在下面的示例中，我们有一个ID为" sample-div1"的div，该ID最初是可见的。
我们将在5000毫秒内淡出div，一旦动画完成，我们将打印"完成！"。
在浏览器控制台中。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
jQuery的
$("#sample-div1").fadeOut(5000, function(){
console.log("Done!");
});
fadeTo()
我们使用fadeTo()方法将元素的不透明度设置为给定值。
语法
$(selector).fadeTo(duration, opacity, complete);
完整函数是可选的。
在以下示例中，我们有一个ID为" sample-div1"的div。
我们将div淡化为50％的不透明度，即，将不透明度设置为0.5，并使用5000毫秒的持续时间。
我们有一个函数将在fadeTo方法完成后执行。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
jQuery的
$("#sample-div1").fadeTo(5000, 0.5, function(){
console.log("Done!");
});
fadeToggle()
当我们想在淡入和淡出之间切换时，我们使用fadeToggle()方法。
语法
$(selector).fadeToggle(duration, complete);
持续时间和完整函数都是可选的。
在以下示例中，我们的div的ID为" sample-div1"。
当我们单击"切换"按钮时，我们可以淡入和淡出div。
HTML
<div id="sample-div1"> <p>Hello World</p> </div> <button id="toggleBtn">Toggle</button>
jQuery的
$("#toggleBtn").on("click", function(){
console.log("Clicked!");
$("#sample-div1").fadeToggle(200, function(){
console.log("Done!");
});
});
Slide
我们使用不同的滑动方法来向上，向下和切换元素。
以下是我们将在本教程中讨论的滑动方法。
- slideDown()
- slideUp()
- slideToggle()
slideDown()
当我们要滑动并显示元素时，我们使用slideDown()方法。
语法
$(selector).slideDown(duration, complete);
持续时间和完整函数都是可选的。
在下面的示例中，我们有一个ID为" sample-div1"的div，它已隐藏。
我们将使用" slideDown()"方法将其向下滑动并显示其内容。
我们将向下滑动动画500毫秒，动画完成后，我们将打印"完成！"。
在浏览器控制台中。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
CSS
#sample-div1 {
display: none;
}
jQuery
$("#sample-div1").slideDown(500, function(){
console.log("Done!");
});
slideUp()
当我们想要滑动和隐藏元素时，我们使用slideUp()方法。
语法
$(selector).slideUp(duration, complete);
持续时间和完整函数都是可选的。
在以下示例中，我们有一个ID为" sample-div1"的div。
我们将使用" slideUp()"方法将其向上滑动并隐藏其内容。
我们将对幻灯片进行动画处理500毫秒，动画完成后，我们将打印"完成！"。
在浏览器控制台中。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
jQuery
$("#sample-div1").slideUp(500, function(){
console.log("Done!");
});
slideToggle()
当我们想在向上滑动和向下滑动之间切换时，可以使用slideToggle()方法。
语法
$(selector).slideToggle(duration, complete);
持续时间和完整函数都是可选的。
在以下示例中，我们有一个ID为" sample-div1"的div。
当我们单击"切换"按钮时，我们可以向上和向下滑动div。
HTML
<div id="sample-div1"> <p>Hello World</p> </div>
jQuery
$("#toggleBtn").on("click", function(){
console.log("Clicked!");
$("#sample-div1").slideToggle(200, function(){
console.log("Done!");
});
});
