1. 基本特效
(1) 显示 / 隐藏 / 切换
// .show(); => .hide(); => .toggle();
$(".hide").click(function(){
$(".box").show(3000, function(){
console.log('显示完成');
});
});
// ==================== //// =====================
var n = 0;
$(".hide").click(function(){
$(".box").toggle(3000, function(){
var l = n++ % 2;
if(re === 0){
// 做什么 动画隐藏
}else{
//做另一件事 显示动画结束
}
});
});
(2) 滑动特效
// .slideUp(); ==> .slideDown(); ==> .slideToggle();
(3) 渐变
// 淡入淡出 淡出隐藏 淡出显示
// .fadeOut(); ==> .fadeIn(); ==> .fadeToggle();
(4) 自定义 .animate();
$(".vto").click(function(){
$(".box1").animate({
width: '300px',
left: "+= 10",
height: "toggle" // 来回切换
}, 1000, function(){
// 动画完成的回调函数
}).animate();
});
// 可以链式操作
// 变换 透明度
$(".vtn").click(function(){
$(".box2").fadeTo('nomal', .5, function(){
console.log();
})
});
(5) 控制动画
// 点击 停止动画
$(".btn5").click(function(){
$(".box1").stop(); // 暂停动画
$(".box1").finish(); // 完成动画
$(".box1").delay(2000); // 延迟动画 用在链式操作 让后面的动画延迟动画
});
(6) 事件对象
#(".btn9").click(function(event){
console.log(event);
});
#(".btn7")[0].click(function(ev){
console.log(ev);
});
// pageX => pageY 用的最多
