1.基本效果
show([s,[e],[fn]]) 显示
hide([s,[e],[fn]]) 隐藏
toggle([s],[e],[fn]) 显示隐藏切换
参数 speed easing fn 不建议带前两个参数,fn参数指动画完成之后
三个参数都不带,直接隐藏,消失 带回调函数,能有一个动画效果
var count=0;
$(".btn").click(function () {
// count++;
// if(count%2==0){
// $(".block").show(function () {
// //动画完成之后出现 显示 汉字
// console.log("显示");
// });
// }
// else {
// $(".block").hide(function () {
// console.log("隐藏");
// });
// }
$(".block").toggle();
})
2.滑动
slideDown([s],[e],[fn]) 下滑
slideUp([s,[e],[fn]]) 上滑
slideToggle([s],[e],[fn])
参数与show()相同,fn依旧是动画完成之后所执行的回调函数
$(".btn").click(function () {
//$(".block").slideToggle(2000,"linear")
count++;
if(count%2==0){
$(".block").slideDown(2000,"linear",function () {
console.log("下滑(显示)");
})
}
else{
$(".block").slideUp(2000,"linear",function () {
console.log("上滑(隐藏)");
});
}
})
3.淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
fadeTo()动画只调整元素的不透明度,不会改变其他的
$(".btn").click(function () {
// count++;
// if(count%2==0){
// $(".block").fadeIn(1000,"linear",function () {
// console.log("淡入(显示)");
// })
// }
// else {
// $(".block").fadeOut(1000,"linear",function () {
// console.log("淡出(隐藏)");
// })
// }
// $(".block").fadeToggle(1000,"linear",function () {
// console.log("完成");
// })
$(".block").fadeTo(1000,0.5,"linear",function () {
console.log("1");
})
})
4.自定义
animate(p,[s],[e],[fn])1.8* params 属性 speed easing fn
stop([c],[j])1.7*
delay(d,[q])
finish([queue])1.9+
animate可以进行队列操作(即一个对象连点)
queue()表示当前对象的效果队列
dequeue()结束自定义函数,将队列继续执行下去
$(".start").click(function () {
$(".mydiv").animate({
marginLeft:200
},1000,"linear",function () {
console.log("完成1");
}).delay(1000).animate({
marginTop:200
},1000,"linear",function () {
console.log("完成2");
}).delay(1000).animate({
marginLeft:0,
opacity:0.1
},1000,"linear",function () {
console.log("完成3");
}).animate({
marginTop:0
},1000,"linear",function () {
console.log("完成4");
});
//动画队列
console.log($(".mydiv").queue().length); //6 因为有4个自定义动画,2个延迟
});
stop() 相当于暂停
参数: 布尔值类型
false就是默认不带参数的效果
true 两个参数是 true false
参数true true 清除当前队列 立即完成当前动画
$(".mydiv").stop(true,true);
finish()直接完成 ,相当于stop(true,true) 但是finish()会直接将css属性变为最终值
$(".mydiv").finish();