为了账号安全,请及时绑定邮箱和手机立即绑定
课程 \ jQuery基础(四)—动画篇

jQuery基础(四)—动画篇

6-5 jQuery中DOM元素的获取index方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
a {
font-size: 30px;
font-weight: 900;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>index方法</h2>
<ul>
<a></a>
<a></a>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>
<ul>
<li id="test4">4</li>
<li id="test5">5</li>
<li id="test6">6</li>
</ul>
<select id="animation">
<option value="1">index无参数</option>
<option value="2">index传递dom</option>
<option value="3">index传递jQuery对象</option>
</select>
<input id="exec" type="button" value="点击执行">
<br />
<br /> 索引结果:
<span></span>
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $span = $("span");
$span.empty();
if (v == "1") {
//找到第一个li的同辈节点中的索引位置
$span.text($("li").index())
} else if (v == "2") {
//通过传递dom查找
$span.text($("li").index(document.getElementById("test1")))
} else if (v == "3") {
//通过传递jQuery对象查找
$span.text($("li").index($("#test6")))
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
6-4 jQuery中DOM元素的获取get方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
a {
font-size: 30px;
font-weight: 900;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>get方法</h2>
<div id="aaron">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
</div>
<select id="animation">
<option value="1">get正数索引参数</option>
<option value="2">get负数索引参数</option>
</select>
<input id="exec" type="button" value="点击执行">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron a");

//通过get找到第二个a元素,并修改蓝色字体
if (v == "1") {
$aaron.get(1).style.color = "blue"
} else if (v == "2") {
//通过get找到最后一个a元素,并修改字体颜色
$aaron.get(-2).style.color = "#8A2BE2"
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
6-3 jQuery中去空格神器trim方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>trim方法</h2>

未处理
<input type="text" name="" id="results1" value=" 前后留空 " />
<input id="exec1" type="button" value="点击执行"> <br />
trim处理
<input type="text" name="" id="results2" value=" 前后留空 " />
<input id="exec2" type="button" value="点击执行">
<script type="text/javascript">
$("#exec1").click(function() {
alert("值的长度:" + $("#results1").val().length)
});

$("#exec2").click(function() {
alert("值的长度:" + $.trim($("#results2").val()).length)
});
</script>
</body>
</html>
2021-08-25 查看完整代码
6-2 jQuery中查找数组中的索引inArray
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
color:red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>inArray方法</h2>
<p>慕课网,专注分享</p>
<div id="aaron"></div>
点击观察结果:
<select id="animation">
<option value="1">inArray</option>
<option value="2">inArray</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
$aaron.empty();
if (v == "1") {
var index = $.inArray('Aaron',['test','Aaron', 'array','慕课网']);
$aaron.text('Aaron的索引是: '+ index)

} else if (v == "2") {
//指定索引开始的位置
var index = $.inArray('a',['a','b','c','d','a','c'],2);

$aaron.text('a的索引是: '+ index)
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
6-1 jQuery中each方法的应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
color:red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<p>慕课网,专注分享</p>
<div id="aaron"></div>
点击观察结果:
<select id="animation">
<option value="1">each数组</option>
<option value="2">each对象</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
$aaron.empty();
if (v == "1") {
// 遍历数组元素
$.each(['Aaron', '慕课网'], function(i, item) {
$aaron.append("索引=" + i + "; 元素=" + item);
});
} else if (v == "2") {
// 遍历对象属性
$.each({
name: "张三",
age: 18
}, function(property, value) {
$aaron.append("属性名=" + property + "; 属性值=" + value);
});
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
5-3 jQuery中停止动画stop
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>stop</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
<input id="exec" type="button" value="执行动画"><br /><br />
点击观察动画效果:
<select id="animation">
<option value="1">stop()</option>
<option value="2">stop(true)</option>
<option value="3">stop(true,true)</option>
</select>
<a></a>
<input id="stop" type="button" value="停止动画">
<script type="text/javascript">
//点击执行动画
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})
$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//当前当前动画
$aaron.stop()
} else if (v == "2") {
//停止所以队列
$aaron.stop(true)
} else if (v == "3") {
//停止动画,直接跳到当前动画的结束
$aaron.stop(true,true)
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
5-2 jQuery中动画animate(下)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(下)</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
点击观察动画效果:
<select id="animation">
<option value="1">动画step动画</option>
<option value="2">动画progress回调</option>
</select>
<a></a>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//观察每一次动画的改变
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})
} else if (v == "2") {
//观察每一次进度的变化
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一步动画完成后调用的一个函数,
//无论动画属性有多少,每个动画元素都执行单独的函数
progress: function(now, fx) {
$aaron.text('进度:'+arguments[1])
// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
// alert(data)
}
})
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
5-1 jQuery中动画animate(上)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
color:red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(上)</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
点击观察动画效果:
<select id="animation">
<option value="1">动画1</option>
<option value="2">动画2</option>
<option value="3">动画3</option>
<option value="4">动画4</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
// 数值的单位默认是px
$aaron.animate({
width :300,
height :300
});
} else if (v == "2") {
// 在现有高度的基础上增加100px
$aaron.animate({
width : "+=100px",
height : "+=100px"
});
} else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});
} else if (v == "4") {
//通过toggle参数切换高度
$aaron.animate({
width: "toggle"
});
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
4-1 jQuery中toggle与slideToggle以及fadeToggle的比较
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p{
color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>toggle与slideToggle以及fadeToggle的比较</h2>
<p>测试文字淡入效果</p>
<p>慕课网,专注分享</p>
动画切换:
<select id="animation">
<option value="1">toggle</option>
<option value="2">slideToggle</option>
<option value="3">fadeToggle</option>
</select>
<input id="btnShow" type="button" value="点击切换" />
<script type="text/javascript">
$("#btnShow").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").toggle();
} else if (v == "2") {
$("p").slideToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(1000, "linear");
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
3-4 jQuery中淡入效果fadeTo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>fadeTo</h2>
<p>测试文字透明度效果</p>
<p>慕课网,专注分享</p>
透明度的设置效果:
<select id="animation">
<option value="1">fadeTo( "slow" ,0.5 )</option>
<option value="2">fadeTo( 1000 ,0.2 )</option>
<option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
</select>
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
<script type="text/javascript">
//【切换显示/隐藏】按钮
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeTo("slow", 0.5);
} else if (v == "2") {
$("p").fadeTo(1000, 0.2);
} else if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
3-3 jQuery中淡入淡出切换fadeToggle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>fadeToggle</h2>
<p>测试文字淡入淡出切换效果</p>
<p>慕课网,专注分享</p>
淡入淡出的隐藏效果:
<select id="animation">
<option value="1">fadeToggle( )</option>
<option value="2">fadeToggle( "slow" )</option>
<option value="3">fadeToggle( 3000 )</option>
<option value="4">fadeToggle( 1000, complete )</option>
<option value="5">fadeToggle( 1000, "linear" )</option>
<option value="6">fadeToggle( options )</option>
</select>
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
<script type="text/javascript">
//【切换显示/隐藏】按钮
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeToggle();
} else if (v == "2") {
$("p").fadeToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(3000);
} else if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切换完毕!");
});
} else if (v == "5") {
$("p").fadeToggle(1000, "linear");
} else if (v == "6") {
$("p").fadeToggle({
duration: 1000
});
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
3-2 jQuery中淡入动画fadeIn
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
select{
width:100%;
height: 30px;
}
p {
color: red;
display: none;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>fadeIn</h2>
<p>测试文字淡出效果</p>
<p>慕课网,专注分享</p>
选择:淡出的隐藏效果
</br>
</br>
<select id="animation">
<option value="1">fadeIn( )</option>
<option value="2">fadeIn( "slow" )</option>
<option value="3">fadeIn( 3000 )</option>
<option value="4">fadeIn( 2000, complete )</option>
<option value="5">fadeIn( 1000, "linear" )</option>
<option value="6">fadeIn( options )</option>
</select>
</br></br>
<input id="btnFadeIn" type="button" value="执行淡出效果" />
<input id="btnHide" type="button" value="点击隐藏" />
<script type="text/javascript">
//【显示】按钮
$("#btnFadeIn").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeIn();
} else if (v == "2") {
$("p").fadeIn("slow");
} else if (v == "3") {
$("p").fadeIn(3000);
} else if (v == "4") {
$("p").fadeIn(2000, function() {
alert("显示完毕!");
});
} else if (v == "5") {
$("p").fadeIn(1000, "linear");
} else if (v == "6") {
$("p").fadeIn({
duration: 1000
});
}
});
// 【隐藏】按钮
$("#btnHide").click(function() {
$("p").hide();
});
</script>
</body>
</html>
2021-08-25 查看完整代码
3-1 jQuery中淡出动画fadeOut
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p{
color:red;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>fadeOut</h2>
<p>测试文字淡入效果</p>
<p>慕课网,专注分享</p>
淡出的隐藏效果:
<select id="animation">
<option value="1">fadeOut( )</option>
<option value="2">fadeOut( "slow" )</option>
<option value="3">fadeOut( 3000 )</option>
<option value="4">fadeOut( 1000, complete )</option>
<option value="5">fadeOut( 1000, "linear" )</option>
<option value="6">fadeOut( options )</option>
</select>
<br/><br/>
<input id="btnFadeOut" type="button" value="点击淡出隐藏" />
<input id="btnShow" type="button" value="显示" />
<script type="text/javascript">
//【显示】按钮
$("#btnShow").click(function() {
$("p").show();
});
//【隐藏】按钮
$("#btnFadeOut").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeOut();
} else if (v == "2") {
$("p").fadeOut("slow");
} else if (v == "3") {
$("p").fadeOut(3000);
} else if (v == "4") {
$("p").fadeOut(2000, function() {
alert("隐藏完毕!");
});
} else if (v == "5") {
$("p").fadeOut(1000, "linear");
} else if (v == "6") {
$("p").fadeOut({
duration: 1000
});
}
});
</script>
</body>
</html>
2021-08-25 查看完整代码
2-3 jQuery中上卷下拉切换slideToggle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}

.right div {
background: yellow;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>slideToggle</h2>
<div class="left">
<div id="a1"></div>
<button>点击slideToggle上下卷滚切换</button>
</div>
<script type="text/javascript">
$("button").click(function() {
$("#a1").slideToggle(3000)
});
</script>
</body>
</html>
2021-08-25 查看完整代码
2-2 jQuery中上卷动画slideUp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>slideUp</h2>
<div class="left">
<h4>测试一</h4>
<div id="a1"></div>
<button>点击slideUp隐藏动画</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideUp(3000)
});
</script>
<div class="right">
<h4>测试二</h4>
<div id="a2"></div>
<button>点击slideUp执行回调</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('动画执行结束')
})
});
</script>
</body>
</html>
2021-08-25 查看完整代码
2-1 jQuery中下拉动画slideDown
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
display: none;
}
.left div {
background: #bbffaa;
}

.right div {
background: yellow;
}
</style>
<script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
<h2>slideDown</h2>
<div class="left">
<h4>测试一</h4>
<div id="a1">hide-show</div>
<button>点击slideDown显示动画</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});
</script>
<div class="right">
<h4>测试二</h4>
<div id="a2">hide-show</div>
<button>点击slideDown执行回调</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
alert('动画执行结束')
})
});
</script>
</body>


</html>
2021-08-25 查看完整代码
1-4 jQuery中显示与隐藏切换toggle方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left {
background: #bbffaa;
}
.right {
background: yellow;
display: none;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>通过toggle切换显示与隐藏</h2>
<div class="left">显示到隐藏</div>
<div class="right">隐藏到显示</div>
<button>直接show-hide动画</button>
<button>直接hide-show动画</button>
<script type="text/javascript">
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
<script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script>
</body>
</html>
2021-08-25 查看完整代码
1-3 jQuery中显示元素的show方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>hide-show</h2>
<div class="left">
<div id="a1">hide-show</div>
<button>直接hide-show动画</button>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
</script>
</body>
</html>
2021-08-25 查看完整代码
1-2 jQuery中隐藏元素的hide方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}

.right div {
background: yellow;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>hide</h2>
<div class="left">
<h4>测试一</h4>
<div id="a1">hide操作</div>
<button>直接hide</button>
<script type="text/javascript">
//点击buttom1 直接隐藏
$("button:first").click(function() {
$("#a1").hide()
});
</script>
<h4>测试一</h4>
<div id="a2">hide动画操作</div>
<button>hide带动画</button>
<script type="text/javascript">
//点击buttom2 执行动画隐藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});
</script>
</div>
</body>
</html>
2021-08-25 查看完整代码
意见反馈 帮助中心 APP下载
官方微信