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