JQ的事件
on() 绑定事件
off() 移出事件
click()写法，也用off()取消
JQ中的事件绑定可以使用相应的事件函数比如说：
click() mouseover() mousermove()..
也可以使用on()方法
$('div').on('click', function(){ alert(1);})
支持多事件写法:
$('#div1').on('click mouseover',function(){ alert(123);});
通过on方法添加的事件, 可以通过off方法移除；
- $('div').off('click', fn); 移除指定事件的指定函数
$('div').off('click'); 移除指定事件的所有函数
$('div').off('click mouseover'); 移除多个事件的所有函数
$('div').off(); 移除所有事件
<div>aaaaaaa</div>
<script>
// $('div').click(function(){
// alert(1);
// })
// function fn(){
// console.log(1);
// }
// $('div').on( 'click', fn);
// $('div').on('click mouseover', function(){
// alert(1);
// })
// $('div').off( 'click', fn);
//移除该事件上的所有函数
// $('div').off();
// //移除指定事件的指定函数
// $('div').off('click', fn);
// //移除指定事件的所有函数
// $('div').off('click');
// //移除多个事件的所有函数
// $('div').off('click mouseover');
// //移除所有事件
// $('div').off();
$('div').click(function(){
alert(1);
})
$('div').off('click');
</script>
运动
无默认的时间 normal
show() , hide() , toggle()
'fast' 200 快
'normal' 400 正常
'slow' 600 慢
动画效果：有默认的时间 normal
- 渐入显示 ：fadeIn
渐出消失：fadeOut
交替： fadeToggle()
向下滑出显示：slideDown() ,
向上滑入消失：slideUp() ,
交替滑入滑出： slideToggle()
<body>
<button>显示隐藏</button>
<div></div>
<script>
var onOff = true;
$('button').on('click', function(){
if(onOff){
$('div').slideUp(1000);
}
else{
$('div').slideDown(1000);
}
onOff = !onOff;
});
</script>
</body>
animate() :自定义动画
单词：linear 匀速
swing：慢快慢；
参数:
第一个参数 : 对象 {} 去设置样式属性和值(目标点)
第二个参数 : 时间 默认是400
第三个参数 : 运动形式 只有两种 swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
第四个参数 : 运行结束的回调
<script>
$('button').on('click',function(){
// $('div').animate({opacity:0},1000,'linear');
$('div').animate({marginLeft:600},1000,'linear',run);
})
function run(){
$('div').animate({marginTop:600},500,'linear',run1);
}
function run1(){
$('div').animate({marginLeft:0},500,'linear',run2);
}
function run2(){
$('div').animate({marginTop:0},500,'linear');
}
</script>
第二种写法
参数的第二种写法
将后三个参数写在一个对象 {} 中 , 作为函数的第二个参数，默认的设置可以省略
$('#div1').animate({ width: 300}, {
duration: 2000,
easing: 'linear',
complete: function(){ alert(1) }
})
运动队列
思考一个问题: 下面三个动画是同时开始运动的吗？
$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);
答案：不是 是一个一个顺序执行的
animate()是一个异步函数
$('#div1').animate({width : 300},1000);alert(1);
不会阻塞代码的运行
既然是异步, 为什么不是同时执行
因为animate函数的作用只是将运动加入到运动队列中
运动队列可以理解为一个数组 [ 运动1, 运动2, 运动3 ]
当运动1完成后, 才开始执行运动2
delay()
延迟
$('#div1').animate({width:300},1000);
$('#div1').delay(1000);//上面运动执行完之后, 延时1000毫秒, 再执行后续运动
$('#div1').animate({height : 300},1000);
也相当与将延时加入运动队列
[运动1, 延时, 运动2]
链式写法
$('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000);
停止运动
stop() 停止当前运动，继续执行后面的运动
//默认情况下 : 只会停止当前运动
//比如说［运动１， 运动２］, 我们现在正在运动１， 点击停止， 停止运动１到当前位置，然后运行运动2
$('#div1').stop();
//第一个参数 : 可以停止所有的运动 停止到当前位置
$('#div1').stop(true);
//第二个参数 : 使当前运动停止到指定的目标点，后面的运动不会在执行
$('#div1').stop(true,true);
//可以停止在所有的指定的目标点
$('#div1').finish();
stop()还可以清空队列
鼠标移入div变大 移出变小
$('#div1').mouseover(function(){
$(this).animate({width:200,height:200});
}).mouseout(function(){
$(this).animate({width:100,height:100});
});
当快速移入移出的时候， 就出现问题了
鼠标移出后， 运动依然没有停止
原因： 当快速的移入移出, 运动不断的被加入运动队列中, 运动被依次执行, 由于运动需要一定的时间, 所以出现了这种情况
我们可以用stop()方法来解决这个问题
stop() : 不但可以停止运动，还有清空队列的行为
$('#div1').mouseover(function(){
$(this).stop().animate({width:200,height:200});
}).mouseout(function(){
$(this).stop().animate({width:100,height:100});
});
网友评论