jQuery动画
陆晓博
jQuery动画：
方法：
show hide toggle：显示 隐藏 切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: yellow;
/*让元素不显示*/
display: none;
}
#d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function fun1() {
/*三个参数，完成时间 动画效果 动画完成后执行的方法，不用的参数可以不写*/
$("#d1").show(2000)
$("#d2").hide(3000);
}
function fun2() {
$("#d1").hide(2000)
$("#d2").show(3000);
}
function fun3() {
/*切换*/
$("#d1").toggle(3000)
$("#d2").toggle(3000);
}
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<input type="button" value="show" onclick="fun1()" />
<input type="button" value="hide" onclick="fun2()" />
<input type="button" value="toggle" onclick="fun3()" />
</body>
</html>
slideDown slideUp slideToggle 上下显示 上下隐藏 上下切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: yellow;
/*让元素不显示*/
display: none;
}
#d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function fun1() {
/*三个参数，完成时间 动画效果 动画完成后执行的方法，不用的参数可以不写*/
$("#d1").slideDown(2000)
$("#d2").slideUp(3000);
}
function fun2() {
$("#d1").slideUp(2000)
$("#d2").slideDown(3000);
}
function fun3() {
/*切换*/
$("#d1").slideToggle(3000)
$("#d2").slideToggle(3000);
}
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<input type="button" value="show" onclick="fun1()" />
<input type="button" value="hide" onclick="fun2()" />
<input type="button" value="toggle" onclick="fun3()" />
</body>
</html>
fadeIn fadeOut fadeToggle fadeTo 渐变显示 渐变隐藏 渐变切换 渐变到一定程度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: yellow;
/*让元素不显示*/
display: none;
}
#d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function fun1() {
/*三个参数，完成时间 动画效果 动画完成后执行的方法，不用的参数可以不写*/
$("#d1").fadeIn(2000)
$("#d2").fadeOut(3000);
}
function fun2() {
$("#d1").fadeOut(2000)
$("#d2").fadeIn(3000);
}
function fun3() {
/*切换*/
$("#d1").fadeToggle(3000)
$("#d2").fadeToggle(3000);
}
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<input type="button" value="show" onclick="fun1()" />
<input type="button" value="hide" onclick="fun2()" />
<input type="button" value="toggle" onclick="fun3()" />
</body>
</html>
animate :自定义动画，参数：动画变化的方法，变化的时间，动画结束后执行的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
margin: 0px auto;
}
#d1 img{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function () {
setInterval(function () {
$('#d1').animate({
width:'50px',
height:'50px',
opacity:0.2
},500)
$('#d1 img').animate({
width:'50px',
height:'50px',
opacity:0.2
},500)
$('#d1').animate({
width:'100px',
height:'100px',
opacity:1
},500)
$('#d1 img').animate({
width:'100px',
height:'100px',
opacity:1
},500)
},1000)
})
</script>
</head>
<body>
<div id='d1'>
<img src="../img/b.jpg" />
</div>
</body>
</html>
迭代遍历的方法：
<script>
$(function(){
var $lis =$('li')
/*遍历所有元素的方法*/
/*
each每拿出一个元素 都会执行一次内部的function
i 当前元素的索引
e 当前元素 DOM对象
*
* */
$lis.each(function (i,e){
console.info(i+'>>>'+$(e).text())
})
$.each($lis,function (i,e){
console.info(i+'>>>'+$(e).text())
})
})
</script>
类似资料：