1、隐藏显示
$().show() 显示
$().show() 隐藏
$().toggle() 切换
参数1:执行的时间 单位是 毫秒
参数2:执行方式 linear 线性
参数3:执行结束的回调函数
执行时margin padding width height opacity 都在改变
执行结束 div 标签 添加 display none 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
font-size: 50px;
}
div{
width: 100px;
height: 100px;
margin: 100px auto;
background: pink;
}
</style>
</head>
<body>
<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src=".././jquery.min.js"></script>
<script>
$('[name="show"]').click(function(){
// 操作 div标签 显示
$('div').show(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="hide"]').click(function(){
// 操作 div标签 隐藏
$('div').hide(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="toggle"]').click(function(){
// 操作 div标签 切换
$('div').toggle(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
</script>
</body>
</html>
2、上卷下拉
$().slideDown() 显示
$().slideUp() 隐藏
$().slideToggle() 切换
参数1:执行的时间单位是 毫秒
参数2:执行方式 linear 线性
参数3:执行结束的回调函数
执行时 margin-top margin-bottom padding-top padding-bottom width height opacity 都在改变;执行结束 div 标签 添加 display none属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
font-size: 50px;
}
div{
width: 100px;
height: 300px;
margin: 100px auto;
background: pink;
}
</style>
</head>
<body>
<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src="../../../jquery.min.js"></script>
<script>
$('[name="show"]').click(function(){
// 操作 div标签 显示
$('div').slideDown(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="hide"]').click(function(){
// 操作 div标签 隐藏
$('div').slideUp(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="toggle"]').click(function(){
// 操作 div标签 切换
$('div').slideToggle(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
</script>
</body>
</html>
3、 渐隐渐显
$().fadeIn() 显示
$().fadeOut() 隐藏
$().fadeToggle() 切换
参数1:执行的时间 单位是 毫秒
参数2:执行的方式 linear 线性
参数3:执行结束的回调函数
执行时opacity在改变,执行结束div标签添加display none属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
font-size: 50px;
}
div{
width: 200px;
height: 200px;
margin: 100px auto;
background: pink;
}
</style>
</head>
<body>
<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src="../../../jquery.min.js"></script>
<script>
$('[name="show"]').click(function(){
// 操作 div标签 显示
$('div').fadeIn(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="hide"]').click(function(){
// 操作 div标签 隐藏
$('div').fadeOut(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
$('[name="toggle"]').click(function(){
// 操作 div标签 切换
$('div').fadeToggle(2000 , 'linear' , function(){
console.log('运动执行结束了')
})
})
</script>
</body>
</html>
4、自定义动画
$().animate()
参数1:运动的属性和属性值 对象形式
参数2:运动的时间 单位毫秒
参数3:运动的方式 linear
参数4:运动结束的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
font-size: 50px;
}
div{
width: 100px;
height: 100px;
background: pink;
position: fixed;
top:100px;
left: 0;
}
</style>
</head>
<body>
<button name="go">去</button>
<button name="back">回</button>
<div></div>
<script src=".././jquery.min.js"></script>
<script>
$('[name="go"]').click(function(){
$('div').animate( { top:500 , left:500 , width:300 , height:300 } , 2000 , 'linear' , function(){console.log('运动结束了')})
})
$('[name="back"]').click(function(){
$('div').animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
})
</script>
</body>
</html>
5、终止动画
jQuery动画 默认的执行方式是 按照顺序 一个一个的执行动画,上一个动画没有执行结束,下一个动画不会触发执行
动画的终止;
$().stop()
立刻停止之前没有执行完的所有动画,从标签当前位置开始,立即执行触发的新的动画
$().finish()
立刻停止之前没有执行完的所有动画,从上一个动画的结束位置/目标位置 开始执行触发的新的动画
相同点:终止的是 当前新触发的动画之前 没有执行结束的所有的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
font-size: 50px;
}
div{
width: 100px;
height: 100px;
background: pink;
position: fixed;
top:100px;
left: 0;
}
</style>
</head>
<body>
<button name="go">去</button>
<button name="back">回</button>
<div></div>
<script src="../../../jquery.min.js"></script>
<script>
$('[name="go"]').click(function(){
$('div').animate( { top:500 , left:500 , width:300 , height:300 } , 2000 , 'linear' , function(){console.log('运动结束了')})
})
$('[name="back"]').click(function(){
// 在哪儿就从哪儿 开始执行新的动画
// $('div').stop().animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
// 从上一个运动的终点位置 开始执行新的动画
$('div').finish().animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
})
</script>
</body>
</html>