jQuery_02效果
2023-11-14 本文已影响0人
tzktzk1
jQuery 效果- 隐藏和显示
jQuery提供了一个简单的界面来执行各种令人惊奇的效果。
jQuery效果方法使我们能够以最少的配置快速实现常用的效果。
jQuery hide() 和 show()
您可以使用hide()和show()方法隐藏和显示HTML元素。
下面的示例演示了hide()方法和show()方法的用法：
<!DOCTYPE html>
<html>
<title>jQuery 效果- Hide 和Show显示隐藏示例 - 基础教程(nhooo.com)</title>
<head>
<style>
p {
padding: 15px;
background: #7F00FF;
color: white;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 隐藏显示段落
$("#hide-btn").click(function(){
$("p").hide();
});
// 显示隐藏的段落
$("#show-btn").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h2> jQuery隐藏和显示</h2>
<p>如果单击"隐藏"按钮，所有段落将消失。</p>
<p>然后，请点击"显示"按钮。</p>
<button id="hide-btn">隐藏</button>
<button id="show-btn">显示</button>
</body>
</html>
这是hide() 方法的语法：
$(selector).hide(duration, easing, callback);
这是show()方法的语法：
$(selector).show(duration, easing, callback);
hide()和show()方法接受三个可选参数：
duration -确定效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定方法完成后要调用的函数
以下示例通过hide()和show()演示了duration参数：
示例
$("#hide-btn").click(function(){
$("p").hide(1000);
});
$("#show-btn").click(function(){
$("p").show(1000);
});
以下示例使用hide()和show()演示了回调参数：
示例
$("#hide-btn").click(function(){
$("div").hide(1000, function(){
alert("DIV被隐藏");
});
});
$("#show-btn").click(function(){
$("div").show(1000, function(){
alert("DIV被显示");
});
});
动画所有跨度(在本示例中为单词)快速隐藏，在200毫秒内完成每个动画：
示例
$("button").click(function(){
$("span:last-child").hide("fast", function(){
$(this).prev().hide("fast", arguments.callee);
});
});
jQuery toggle()方法
我们还可以使用toggle()方法在隐藏和显示HTML元素之间切换。
如果所选元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
下面的示例在单击按钮时在hide和show所有<p>元素之间切换：
示例
$("button").click(function(){
$("p").toggle(1500);
});
toggle()方法的语法如下：
$(selector).toggle(duration, easing, callback);
toggle()方法接受三个可选参数：
duration -确定效果将持续多长时间。可能的值：“ slow”，“ fast”或 毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定方法完成后要调用的函数
jQuery 效果 - 淡入淡出
jQuery提供了一个简单的界面来执行各种令人惊奇的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。
jQuery淡入淡出方法
使用jQuery，我们可以实现淡入或淡出效果。
我们有以下jQuery淡入淡出方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 和 fadeOut()
jQuery fadeIn()方法逐渐将选定元素的不透明度从隐藏更改为可见。
jQuery fadeOut()方法逐渐将选定元素的不透明度从可见更改为隐藏。
以下示例演示了fadeIn()方法和fadeOut()方法的用法：
示例
// 淡出显示的段落
$("#fadeout-btn").click(function(){
$("p").fadeOut();
});
// 淡入隐藏的段落
$("#fadein-btn").click(function(){
$("p").fadeIn();
});
这是fadeIn()方法 的语法：
$(selector).fadeIn(duration, easing, callback);
这是fadeOut()方法 的语法：
$(selector).fadeOut(duration, easing, callback);
无论fadeIn()和fadeOut()方法接受三个可选参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定淡入淡出方法完成后要调用的函数
下面的示例演示了使用fadeIn()和fadeOut()的duration参数：
示例
$("#fadeout-btn").click(function(){
$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
$("p").fadeIn(1500);
});
下面的示例演示了带有fadeIn()和fadeOut()的回调参数：
示例
$("#fadeout-btn").click(function(){
$("div").fadeOut(600, function(){
$("h3").text("淡出完成.");
});
});
$("#fadein-btn").click(function(){
$("div").fadeIn(600, function(){
$("h3").text("淡入完成.");
});
});
对所有跨度（在这种情况下为单词）进行动画处理以使其快速褪色，并在200毫秒内完成每个动画处理：
示例
<!DOCTYPE html>
<html>
<title>jQuery Effects - Fading示例 - 基础教程(nhooo.com)</title>
<head>
<style>
span {
background: #7F00FF;
color: white;
float: left;
padding: 10px 5px;
}
div {
margin-bottom: 15px;
}
.clearfix::after {
content: '';
clear: both;
display: table;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeout-btn").click(function(){
$("span:last-child").fadeOut("fast", function(){
$(this).prev().fadeOut("fast", arguments.callee);
});
});
$("#fadein-btn").click(function(){
$("span:first-child").fadeIn("fast", function(){
$(this).next().fadeIn("fast", arguments.callee);
});
});
});
</script>
</head>
<body>
<div class="clearfix">
<span>The</span> <span>purpose</span> <span>of</span>
<span>jQuery</span> <span>is</span> <span>to</span>
<span>make</span> <span>it</span> <span>much</span>
<span>easier</span> <span>to</span> <span>use</span>
<span>JavaScript</span> <span>on</span> <span>your</span>
<span>website.</span>
</div>
<button id="fadeout-btn">淡出</button>
<button id="fadein-btn">淡入</button>
</body>
</html>
jQuery fadeToggle()方法
我们还可以使用fadeToggle()方法在HTML元素的淡入和淡出之间切换。
如果所选元素淡出，fadeToggle()则将其淡入。
如果所选元素淡入，fadeToggle()将淡出它们。
以下示例在所有<p>元素的淡入和淡出之间切换：
示例
$("button").click(function(){
$("p").fadeToggle();
});
这是fadeToggle()方法 的语法：
$(selector).fadeToggle(duration, easing, callback);
该fadeToggle()方法接受三个可选参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定淡入淡出方法完成后要调用的函数
jQuery fadeTo()方法
jQuery fadeTo()方法逐渐将所选元素的不透明度更改为指定的不透明度。
注意：该fadeTo()方法不会更改页面的布局（所选元素仍将占用与以前相同的空间）。
此示例逐渐降低<div>元素的不透明度：
示例
$("button").click(function(){
$("div").fadeTo(500, 0.2);
});
这是fadeTo()方法 的语法：
$(selector)fadeTo.(duration, opacity, easing, callback)
参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
opacity-指定要淡入的不透明度。必须是介于0.00和1.00之间的数字
easing -（可选）指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-（可选）指定淡入淡出方法完成后要调用的函数
下面的示例演示了带有fadeTo()的回调参数：
示例
$("button").click(function(){
$("div").fadeTo(500, 0, function(){
alert("透明度降低!!!");
});
});
jQuery 效果 - 滑动
jQuery提供了一个简单的界面来执行各种惊人的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。
jQuery滑动方法
使用jQuery，我们可以在元素上创建滑动效果。
我们有以下jQuery幻灯片方法：
slideUp()
slideDown()
slideToggle()
jQuery slideUp() 和 slideDown()
slideUp()方法通过滑动隐藏选定的元素。
slideDown()方法以滑动方式显示选定的元素。
下面的示例演示了slideUp()方法和slideDown()方法的用法：
示例
// 向上滑动段落
$("#btn1").click(function(){
$("p").slideUp();
});
// 向下滑动段落
$("#btn2").click(function(){
$("p").slideDown();
});
这是slideUp() 方法的语法：
$(selector).slideUp(duration, easing, callback);
这是slideDown()方法的语法：
$(selector).slideDown(duration, easing, callback);
无论slideUp()和slideDown()方法接受三个可选参数：
duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定滑动方法完成后要调用的函数
下面的示例演示了使用slideUp()和slideDown()的duration参数：
示例
$("#btn1").click(function(){
$("p").slideUp(1500);
});
$("#btn2").click(function(){
$("p").slideDown(1500);
});
下面的示例演示了带有slideUp()和slideDown()的回调参数：
示例
$("#btn1").click(function(){
$("div").slideUp(1500, function(){
alert("向上滑动完成!");
});
});
$("#btn2").click(function(){
$("div").slideDown(1500, function(){
alert("向下滑动完成!");
});
});
动画化所有跨度（在这种情况下为单词）以快速滑动，在200毫秒内完成每个动画：
示例
<!DOCTYPE html>
<html>
<title>jQuery 上下滑动效果slideDown和slideUp示例 - 基础教程(nhooo.com)</title>
<head>
<style>
span {
background: #7F00FF;
color: white;
float: left;
padding: 10px 5px;
}
div {
margin-bottom: 15px;
}
.clearfix::after {
content: '';
clear: both;
display: table;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("span:last-child").slideUp("fast", function(){
$(this).prev().slideUp("fast", arguments.callee);
});
});
$("#btn2").click(function(){
$("span:first-child").slideDown("fast", function(){
$(this).next().slideDown("fast", arguments.callee);
});
});
});
</script>
</head>
<body>
<div class="clearfix">
<span>The</span> <span>purpose</span> <span>of</span>
<span>jQuery</span> <span>is</span> <span>to</span>
<span>make</span> <span>it</span> <span>much</span>
<span>easier</span> <span>to</span> <span>use</span>
<span>JavaScript</span> <span>on</span> <span>your</span>
<span>website.</span>
</div>
<button id="btn1">向上滑动</button>
<button id="btn2">向下滑动</button>
</body>
</html>
jQuery slideToggle()方法
我们还可以使用slideToggle()方法在上下滑动HTML元素之间切换。
如果所选元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
下面的示例在单击按钮时，在所有<p>元素的slideUp和slideDown之间切换：
示例
$("button").click(function(){
$("p").slideToggle(1500);
});
这是slideToggle()method 的语法：
$(selector).slideToggle(duration, easing, callback);
slideToggle()方法接受三个可选参数：
duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定一个在slideToggle()方法完成后要调用的函数
jQuery 效果 - 动画
jQuery允许我们创建自定义动画。
jQuery动画-animate()方法
jQuery animate()方法对一组CSS属性执行自定义动画。
这是animate()方法的语法：
$(selector).animate({styles}, duration, easing, callback)
参数：
{styles} -指定动画将向其移动的CSS属性和值的对象
duration -确定动画效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定在animate()方法完成后要调用的函数
以下示例通过更改元素的宽度为元素设置动画：
示例
$("button").click(function(){
$("div").animate({width: "500px"});
});
以下示例通过更改元素的位置来对元素进行动画处理：
示例
$("button").click(function(){
$("div").animate({left: "500px"});
});
默认情况下，所有HTML元素都具有静态位置，并且静态元素无法移动。
要操纵位置，请记住首先将元素的CSS 位置属性设置为相对，固定或绝对。
jQuery animate()-设置多个属性
我们还可以同时为一个元素的多个属性设置动画。
示例
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px",
opacity: 0.3,
left: "50px"
});
});
以下示例使用animate()演示了duration和easing参数：
示例
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 4000, "linear");
});
以下示例使用animate()演示了回调参数：
示例
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 500, "linear",
function(){
$(this).after("<h2>动画已经完成</h2>");
});
});
使用animate()方法时要记住的要点：
所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。
字符串值不能设置为动画（例如，背景颜色）
要设置背景颜色的动画，请使用jQuery颜色插件
与animate()方法一起使用时，属性名称必须为camelCased，如：您应该使用paddingTop而不是padding-top，使用marginLeft而不是margin-left，等等。
jQuery animate()-使用队列动画
默认情况下，jQuery带有动画的队列功能。
在队列中，一个或多个功能等待运行。
这意味着，如果您彼此之后编写多个animate()调用，则jQuery将使用这些方法调用创建一个“内部”队列。然后，它一个一个地运行动画调用。
下面的示例首先更改DIV元素的宽度，然后更改高度，然后增加文本的字体大小：
示例
$("button").click(function(){
let div = $("div");
div.animate({width:"500px"});
div.animate({height:"200px"});
div.animate({fontSize: "10em"});
});
我们还可以使用jQuery的链接功能在一个队列中逐个动画一个元素的多个属性。
示例
$("button").click(function(){
$("div")
.animate({width:"500px"})
.animate({height:"200px"})
.animate({fontSize: "10em"})
.animate({opacity: 0.3});
});
jQuery animate()-使用相对值
动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。
示例
$("p").click(function(){
$(this).animate({
fontSize: "+=5px",
padding : "+=10px"
});
});
jQuery animate()-使用预定义值
此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：
示例
$("button").click(function(){
$("div").animate({height: "toggle"});
});
jQuery 停止动画
jQuery stop()方法用于在jQuery动画或效果完成之前停止它。
jQuery stop()方法
stop()方法将在完成之前停止当前在选定元素上运行的jQuery动画或效果。
在元素上调用stop()时，当前正在运行的动画（如果有）立即停止。
如果在同一元素上调用了多个动画方法，则以后的动画将放置在效果队列中。
这是stop()方法的语法：
$(selector).stop(clearQueue, jumpToEnd)
stop()方法接受两个可选参数：
clearQueue-一个布尔值，指示是否也要删除排队的动画。默认为false
jumpToEnd-一个布尔值，指示是否立即完成当前动画。默认为false
下面的示例停止当前正在运行的动画：
示例
$("button").click(function(){
$("div").stop();
});
下面的示例，同时停止排队的动画：
示例
$("button").click(function(){
$("div").stop(true);
});
下面的示例为，立即完成所有动画后停止：
示例
<!DOCTYPE html>
<html>
<title>jQuery 停止动画示例 - 基础教程(nhooo.com)</title>
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").animate({width:"500px"}, 1500);
$("div").animate({height:"400px"}, 1500);
$("div").animate({width:"100px"}, 1500);
$("div").animate({height:"100px"}, 1500);
});
$("#btn2").click(function(){
$("div").stop(true, true);
});
});
</script>
<style>
div {
position: relative;
height: 100px;
width: 100px;
margin: 10px 0;
background: coral;
}
</style>
</head>
<body>
<button id="btn1">开始</button>
<button id="btn2">停止</button>
<div></div>
</body>
</html>
jQuery 回调函数(Callback)
JavaScript语句逐行执行。但是，由于jQuery效果需要一些时间才能完成，因此下一个代码行可能会在前一个效果仍在运行时执行。这会产生错误。
为了防止这种情况的发生，jQuery为每个效果方法提供了一个回调函数。
当前效果完成后，将执行回调函数。
回调函数作为效果方法的参数传递，它们通常显示为方法的最后一个参数。
典型语法： $(selector).hide(duration, easing, callback);
下面的示例具有一个回调参数，该参数是在隐藏效果完成后将执行的函数：
示例
$("button").click(function(){
$("p").hide("slow", function(){
// 效果完成后要执行的代码
alert("The paragraph is now hidden");
});
});
下面的示例没有回调参数，并且在隐藏效果完成之前将会显示警报框：
示例
$("button").click(function(){
$("p").hide("slow");
alert("该段落现已隐藏");
});
jQuery 链(Chaining)
jQuery提供了另一个强大的功能，称为方法链接。
链接允许我们在单个语句中的同一元素上运行多个jQuery方法。
jQuery方法链
到目前为止，我们一次只写一个jQuery语句（一个又一个）。
但是，有一种称为链接的技术，该技术可在单个语句中的同一元素上运行多个jQuery命令。
这样，浏览器不必多次查找相同的元素。
这是可能的，因为大多数jQuery方法都返回一个jQuery对象，该对象可以进一步用于调用另一个方法。
下面的实例链在一起css()，hide()和show()方法：
示例
$("button").click(function(){
$("p").css("background-color", "coral").hide(2000).show(2000);
});
我们还可以将一行代码分成多行以提高可读性。
例如，以上示例中的方法序列也可以写成：
示例
$("button").click(function(){
$("p")
.css("background-color", "coral")
.hide(2000)
.show(2000);
});
我们可以在一条语句中链接任意数量的方法：
示例
$("button").click(function(){
$("div")
.animate({width:"500px"})
.animate({height:"200px"})
.animate({fontSize: "10em"})
.animate({opacity: 0.3});
});
注意：有些jQuery方法不返回jQuery对象，而另一些仅根据我们传递给它的参数返回它。考虑以下示例：
// 正确用法
$("p").css("background-color", "coral").hide(2000).show(2000);
// 错误用法
$("p").css("background-color", "coral").hide().show();
