显示与隐藏
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<input type="button" value="切换" id="toggle" /> <br /><br />
<div id="div1"></div>
<br /><br />
<div id="div2"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//显示 $().show()
$('#show').on('click',function(){
/**
* @description:
* @param {number|string} 动画时长
* 如果没有动画时间，则没有动画
* number单位 毫秒
* 'fast' 200 | 'normal' 400 | 'slow' 600
* @param {function} 动画完成回调(类似于于定时器)
* @return: jq对象(链式编程)
*/
$('div').show(2000,function(){
console.log(('1111'))
})
})
//隐藏 $().hide()
$('#hide').on('click',function(){
//hide()所有用法与show()完全一致，只是动画效果相反
$('div').hide(2000,function(){
console.log(('22222'))
})
})
//切换 $().toggle()
$('#toggle').on('click',function(){
/* $().toggle()
display:block, 则执行hide()隐藏
display:none, 则执行show()显示
*/
$('div').toggle('')
})
</script>
</body>
?滑入与滑出
<body>
<input type="button" value="滑入" id="slideDown" />
<input type="button" value="滑出" id="slideUp" />
<input type="button" value="切换" id="slideToggle" /><br /><br />
<div id="div1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//滑入 $().slideDown()
$('#slideDown').on('click',function(){
//滑入滑出所有的语法与 show()/hide()一致的
//唯一区别： 不传参数，默认动画时长400ms
$('div').slideDown(2000,function(){
alert(1111)
})
})
//滑出 $().slideUp()
$('#slideUp').on('click',function(){
$('div').slideUp(2000,function(){
alert(22222)
})
})
//滑入/滑出切换 $().slideToggle()
$('#slideToggle').on('click',function(){
/*
高度为0 : 则滑入 slideDown
高度不是0 : 则滑出 slideUp
*/
$('div').slideToggle()
})
</script>
</body>
淡入与淡出
<body>
<input type="button" value="淡入" id="fadeIn" />
<input type="button" value="淡出" id="fadeOut" />
<input type="button" value="切换" id="fadeToggle" />
<input type="button" value="淡入到指定透明度" id="fadeTo" /><br /><br />
<div id="div1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//淡入 $().fadeIn()
$('#fadeIn').on('click', function () {
//淡入淡出与滑入滑出所有的用法一致，只是动画效果不同
$('div').fadeIn(2000,function(){
alert('11111')
})
})
//淡出 $().fadeOut()
$('#fadeOut').on('click', function () {
$('div').fadeOut(2000,function(){
alert('22222')
})
})
//切换 $().fadeToggle()
$('#fadeToggle').on('click', function () {
/*
透明度为0 ： 则淡入fadeIn()
透明度不为0 ： 则淡出fadeOut()
*/
$('div').fadeToggle()
})
//淡入到指定透明度 $().fadeTo()
$('#fadeTo').on('click', function () {
//第一个参数：动画时间
//第二个参数： 目标透明度
//第三个参数：完成回调
$('div').fadeTo(2000,0.5,function(){
alert('33333')
})
})
</script>
</body>
自定义动画
<body>
<input type="button" value="从左到右800" id="btn" />
<div id="div1"></div>
<div id="div2"></div>
<script src="jquery-1.12.4.js"></script>
<!-- 导入jq颜色插件 -->
<script src="./jquery.color.js"></script>
<script>
$('#btn').on('click',function(){
/**
* @description:
* @param {object} 动画属性对象
* @param {duration} 动画时间
* @param {string} 动画速度 默认缓动：'swing' 匀速:'linear'
* @param {function} 动画完成回调
* @return: jq对象(支持链式编程)
*/
$('#div1').animate({
width:300,
height:300,
backgroundColor:'purple'
},2000,function(){
//动画完成回调
$('#div1').animate({
left:300,
top:300,
width:200,
height:200
})
})
})
</script>
</body>
动画队列
<body>
<input type="button" value="开始动画" id="start" />
<input type="button" value="停止动画" id="stop" /> <br /><br />
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*
1.动画队列 ： jq的动画会按照顺序依次执行
*/
$('#start').on('click',function(){
$('div').slideDown(2000).slideUp(2000)
})
//结束动画队列
$('#stop').on('click',function(){
/*
第一个参数：是否清除队列
true:清除。 后面的动画不执行
false:不清楚。 后面的动画还是会执行
第二个参数：是否跳转本次最终结果
true:跳转。 动画会立即跳转到最终状态
false:不跳转。 动画会停留在原地
*/
$('div').stop(true,false)
})
</script>
</body>
|