4-1动画
2019-03-14 本文已影响0人
大庆无疆
控制显示和隐藏
hide()、 show()、toggle()
参数:可以是一个number类型,也可以是字符串类型（表示动画过渡的时间）
$("div").hide(1000);// 参数是数字
$("div").hide("slow");// 参数是字符串 600ms
$("div").hide("normal");// 参数是字符串 400ms
$("div").hide("fast");// 参数是字符串 200ms
$("div").toggle("fast");// 参数是字符串 200ms
以上方法还可以传入一个参数----》函数，动画执行完后会调用
$("div").hide("fast", function () {console.log("给力啊")});
arguments.callee
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
</body>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
$('div>img').last().hide(500, function () {
$(this).prev().hide(500, arguments.callee);
arguments.callee相当于递归，不断的调用函数（不用结束条件，他自己会结束）
});
});
$('#btn2').click(function () {
$('div>img').first().show(500, function () {
$(this).next().show(500, arguments.callee);
});
})
})
</script>
其他动画方法(滑入滑出):
slideUp()、slideDown()、slideToggle()也可以写参数,参数可以是数字和字符串
$("div").slideUp(1000);// 滑出
$("div").slideDown('fast');// 滑入
$("div").slideToggle(1000);// 切换滑入滑出
其他动画方法（淡入淡出）：fadeIn()、fadeOut()、fadeToggle()
也可以写参数,参数可以是数字和字符串
$("div").fadeIn(1000);// 淡入
$("div").fadeOut('fast');// 淡出
$("div").fadeToggle(1000);// 切换淡入淡出
设置透明度的方法：
fadeTo()
$("div").fadeTo(1000, 0.5);// 让div在1秒内过渡透明度为0.5
接收两个参数，第一个是时间，第二个是透明度
方法：
animate()第一个参数:键值对(数值的属性可以改,颜色不能改(background-color和color不起作用))
第二个参数:动画的时间
第三个参数:回调函数 ---->动画完成后执行
<body>
<input type="button" name="" value="启动" id="btn">
<div id="box">sdf</div>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
// 页面加载事件
$(function () {
// 点击事件
$('#btn').click(function () {
//-----------------------------------------------------------------
// $('#box').animate({'width':'300px', 'height':'300px'}, 800);
//-----------------------------------------------------------------
// 键值对可以这样处理
var keyValue1 = {
width: '300px',
height: '300px',
left: '300px',
top: '200px',
background: 'red',
color: 'yellow'
}
var keyValue2 = {
left: '800px',
top: '-100px',
opacity: '0.4',
}
$('#box').animate(keyValue1, 2000, function () {
$(this).animate(keyValue2, 1500);
});
当鼠标移上去的时候停止动画，而且停止后回调函数也不会执行
$('#box').mouseover(function () {
$(this).stop();// 停止动画
});
});
});
</script>
</body>
