jQuery-动画
示例：
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<button id="stop">暂停</button>
<button id="get">获取</button>
<div class="box">
我在执行动画
</div>
-
显示隐藏动画
不带参数是直接效果
speed（动画的时间） easing(动画的方式 linear可用 默认swing) fn(动画完成执行的函数)
show
hide
toggle
var ishow=false;*/
$('#btn').click(function () {
if(!ishow)
{
$('.box').hide();
ishow=true;
}
else{
$('.box').show();
ishow=false;
}
$('.box').toggle();
});
-
滑动动画
slideDown
slideUp
slideToggle
var isslide = true;
$('#btn).click(function () {
$('.box').slideToggle(1000,function (){
console.log('动画完成');
});
if (isslide) {
$('.box').slideUp(1000);
isslide = false;
}
else {
$('.box').slideDown(1000);
isslide = true;
}
});
-
淡入淡出的动画
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
$('#btn').click(function (){
$('.box').fadeOut(1000,function (){
console.log('动画完成');
});
$('.box').fadeToggle(1000);
$('.box').fadeTo(1000,0,function (){
console.log('动画完成');
});
});
- 自定义动画
animate(p,[s],[e],[fn])1.8
动画属性值可以不带px
暂不支持css3
stop 停止当前正在运行的动画
* 参数 true false
* 1.是否立即清除动画的队列
* 2.是否停止当前动画 立即完成
$('#btn').click(function () {
$('.box').animate({
left: 200
}, 2000, 'linear', function () {
console.log('动画完成');
}).delay(1000).animate({
top: 200
}, 2000, 'linear', function () {
console.log('动画完成');
});
});
$("#stop").click(function () {
$('.box').stop();
//finish() 当前动画停止 不清除队列 直接队列完成
// $('.box').finish();
});
- 获取动画队列
$('#get').click(function (){
console.log($('.box').queue()); //可以知道当前元素有几个动画队列
});