jQuery 标准动画
通过类似于动画的形式,来完成标签的显示隐藏
实际上,本质,就是我们之前写的 运动函数
通过 定位的 left top 属性 和 透明度 opacity 来完成效果
1. $(标签).show() 显示
语法 : $(标签).show(时间,运动曲线,运动结束时执行的函数)
运动到指定的位置,也就是css样式,定义的标签位置
离那里进,就从那里开始运动
离 左上角近 就从左上角开始运动
2. $(标签).hide() 隐藏
语法 : $(标签).hide(时间,运动曲线,运动结束时执行的函数)
从原始的位置,开始隐藏
离那里近,就隐藏到那里
3. $(标签).toggle() 切换
语法 : $(标签).toggle(时间,运动曲线,运动结束时执行的函数)
隐藏就改为显示,显示就改为隐藏
实例
HTML：
<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').show( 2000 , 'linear' , function(){
console.log('div完全显示了');
} )
});
// 给隐藏按钮,添加事件
$('[name="hide"]').click(function(){
$('div').hide( 2000 , 'linear' , function(){
console.log('div完全隐藏了');
} )
});
// 给切换按钮,添加事件
$('[name="toggle"]').click(function(){
$('div').toggle( 2000 , 'linear' , function(){
console.log('div完全切换了');
} )
});
</script>
css：
div{
width: 300px;
height: 300px;
background: pink;
margin: 0 auto;
/* position: fixed; */
/* right: 0; */
display: none;
}
jQuery 折叠动画
通过改变高度，来实现效果。
1. $(标签).slideDown() 显示
语法 : $(标签).slideDown(时间,运动曲线,运动结束时执行的函数)
从 css 设定的位置上 , 下拉显示标签
2. $(标签).slideUp() 隐藏
语法 : $(标签).slideUp(时间,运动曲线,运动结束时执行的函数)
从 css 设定的位置上 , 上卷隐藏标签
3. $(标签).slideToggle() 切换
语法 : $(标签).slideToggle(时间,运动曲线,运动结束时执行的函数)
隐藏就改为显示,显示就改为隐藏
实例
HTML：
<button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 给显示按钮,添加事件
$('[name="down"]').click(function(){
$('div').slideDown( 2000 , 'linear' , function(){
console.log('div完全显示了');
} )
});
// 给隐藏按钮,添加事件
$('[name="up"]').click(function(){
$('div').slideUp( 2000 , 'linear' , function(){
console.log('div完全隐藏了');
} )
});
// 给切换按钮,添加事件
$('[name="toggle"]').click(function(){
$('div').slideToggle( 2000 , 'linear' , function(){
console.log('div完全切换了');
} )
});
</script>
css：
div{
width: 300px;
height: 300px;
background: pink;
margin: 0 auto;
display: none;
}
jQuery 渐隐渐现动画
通过改变透明度，来实现效果。
1. $(标签).fadeIn() 显示
语法 : $(标签).fadeIn(时间,运动曲线,运动结束时执行的函数)
从 css 设定的位置上 , 下拉显示标签
2. $(标签).fadeOut() 隐藏
语法 : $(标签).fadeOut(时间,运动曲线,运动结束时执行的函数)
从 css 设定的位置上 , 上卷隐藏标签
3. $(标签).fadeToggle() 切换
语法 : $(标签).fadeToggle(时间,运动曲线,运动结束时执行的函数)
隐藏就改为显示,显示就改为隐藏
实例
HTML：
<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 给显示按钮,添加事件
$('[name="in"]').click(function(){
$('div').fadeIn( 2000 , 'linear' , function(){
console.log('div完全显示了');
} )
});
// 给隐藏按钮,添加事件
$('[name="out"]').click(function(){
$('div').fadeOut( 2000 , 'linear' , function(){
console.log('div完全隐藏了');
} )
});
// 给切换按钮,添加事件
$('[name="toggle"]').click(function(){
$('div').fadeToggle( 2000 , 'linear' , function(){
console.log('div完全切换了');
} )
});
</script>
css：
div{
width: 300px;
height: 300px;
background: pink;
margin: 0 auto;
display: none;
}
jQuery 自定义动画
$(标签).animate()
可以通过 自定义动画 实现, css样式的改变
语法形式:
$(标签).animate( {属性:属性值,属性:属性值…} )
参数1: 要改变的 css的属性和属性值 可以没有单位px
参数2: 定义的执行时间
参数3: 定义的运动曲线
参数4: 运动结束,执行的函数
特别注意：有一些css样式，是不能改变的
例如颜色
实例
HTML：
<button name="width">改变宽度</button>
<button name="wh">改变宽度高度</button>
<button name="color">改变颜色</button>
<div>中国</div>
<script src="./jquery.min.js"></script>
<script>
$('[name="width"]').click(function(){
let randomW = parseInt(Math.random()*(500+1-100)+100 );
console.log(randomW);
$('div').animate({
width : `${randomW}px`,
} , 2000 , 'linear' , function(){
console.log('运动结束了')
})
});
$('[name="wh"]').click(function(){
let randomW = parseInt(Math.random()*(500+1-100)+100 );
let randomH = parseInt(Math.random()*(500+1-100)+100 );
console.log(randomW,randomH);
$('div').animate({
width : `${randomW}px`,
height: `${randomH}px`,
} , 2000 , 'linear' , function(){
console.log('运动结束了')
})
});
$('[name="color"]').click(function(){
let randomColor = `rgb(${parseInt(Math.random()*256)} ,${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)})`;
console.log(randomColor);
$('div').animate({
background : randomColor,
color : randomColor,
} , 2000 , 'linear' , function(){
console.log('运动结束了')
})
});
</script>
css：
div{
width: 300px;
height: 300px;
background: pink;
margin: 0 auto;
color: red;
font-size: 100px;
/* display: none; */
}
jQuery 停止动画
.stop()
触发程序的执行,会马上停止当前动画的执行
就从标签运动到的当前位置开始,马上执行下一次动画
.finish()
触发程序的执行,会马上停止,当前动画的执行
标签会立即执行动画结束时的效果
从动画结束的位置,开始执行,下一次动画
实例
HTML：
<button name="go">go</button>
<button name="back">back</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 点击触发,新的运动,会马上停止当前运动,并且在当前运动的终止位置,开始执行新的运动
$('[name="go"]').click(function(){
// go上添加,终止的是 back的运动
$('div').stop().animate( {left:'500px' , top:'500px'} , 2000)
});
$('[name="back"]').click(function(){
// 给back添加 .stop()
// 作用是 在 执行当前 back的运动之前,如果还有其他正在执行的运动
// 要立即停止,从当前停止的位置,直接执行back的运动
// $('div').stop().animate( {left:'0px' , top:'50px'} , 2000);
// back添加的,实际上是终止的的go的运动
$('div').finish().animate( {left:'0px' , top:'50px'} , 2000);
});
</script>
css：
div{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top:50px;
left: 0;
}
小结
stop() 和 finish()
都不是操作当前这个运动的
是定义执行当前运动之前,如果还有其他正在执行的运动,应该怎么办
stop() 就从当前标签运动的位置,开始,立即执行下一次运动
finish() 从之前运动的终点目标位置,开始,立即执行下一次运动
