动画
显示隐藏
show(秒数) 显示
hide(秒数) 隐藏
toggle() 切换显示/隐藏
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div></div>
<button>显示</button>
<button>隐藏</button>
<button>显示隐藏</button>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $('button').eq(1).click(function(){
// $('div').hide(300)//方法里面添加时间参数 毫秒
// })
// $('button').eq(0).click(function(){
// $('div').show(1000)
// })
// $('button').eq(2).click(function(){
// $('div').toggle(1000)
// })
// $('button').eq(2).click(function(){
// $('div').toggle(1000,function(){
// alert('哈哈哈哈')
// })
// })
</script>
</html>
slideUp() 上隐藏
slideDown() 下显示
slideToggle() 上下切换
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div></div>
<button>上显示</button>
<button>下隐藏</button>
<button>显示隐藏</button>
</body>
<script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').eq(1).click(function(){
$('div').slideUp(300)//方法里面添加时间参数 毫秒
})
$('button').eq(0).click(function(){
$('div').slideDown(1000)
})
// $('button').eq(2).click(function(){
// $('div').slideToggle(1000)
// })
</script>
</html>
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
fadeTo(秒数,透明度)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div></div>
<button>淡出</button>
<button>淡入</button>
<button>淡出淡入</button>
<button>透明度</button>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $('button').eq(1).click(function(){
// $('div').fadeIn(1300)//方法里面添加时间参数 毫秒
// })
// $('button').eq(0).click(function(){
// $('div').fadeOut(1000)
// })
// $('button').eq(2).click(function(){
// $('div').fadeToggle(1000)
// })
$('button').eq(3).click(function(){
$('div').fadeTo(1000,.2)
})
</script>
</html>
animate() 自定义动画
动画当中想要改变颜色(字体/背景),需要下载js/jquery.color.js这个插件
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
color: #fff;
position: absolute;
top:100px;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<button>点击</button>
</body>
<!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function(){
$('div').animate({
width:'300px',
height:'300px',
'top':'300px',
'left':'300px',
'color':'yellow',
'backgroundColor':'blue',
'font-size':'50px'
},2000)
})
</script>
</html>
stop() 停止 (只能停止当前的列队动画) true、false
delay() 延迟
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
color: #fff;
position: absolute;
top:100px;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<button>点击</button>
<button>停止</button>
</body>
<!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $('button').eq(0).click(function(){
// $('div').animate({'width':'300px'},1000)
// .animate({'height':'500px'},2000)
// .animate({'left':'500px'},3000)
// .animate({'top':'500px'},4000)
// .animate({'backgroundColor':'blue'},5000)
// })
$('button').eq(1).click(function(){
$('div').stop(true)
})
$('button').eq(0).click(function(){
$('div').delay(2000).animate({'width':'300px'},1000)
.animate({'height':'500px'},2000)
.animate({'left':'500px'},3000)
.animate({'top':'500px'},4000)
.animate({'backgroundColor':'blue'},5000)
})
</script>
</html>