jQuery中的事件和动画

jQuery中的事件和动画

事件

$('.box').click(function(ev){})//低版本jQuery没有兼容问题
ev.which//记录鼠标的键值，1、2、3/左键、滚轮、右键

事件绑定

on()

// 事件绑定，on（事件名，[事件委托时写的子级]，函数）

// 绑定两个相同的事件
// $('.box').on('click',function () {
//     console.log(111);
// })
// $('.box').on('click',function () {
//     console.log(222);
// })

// 绑定两个不同的事件
// 第一种写法：
// $('.box').on('click',function () {
//     console.log(111);
// })
// $('.box').on('mouseover',function () {
//     console.log(222);
// })
// $('.box').on('click mouseout',function(){
//     console.log(1122);
// })
//第二种写法
// 也可以把事件放入一个对象中
// $('.box').on({
//     click:function(){
//         console.log('wwww');
//     },
//     mouseout:function(){
//         console.log('qqq');
//     }
// })

事件委托

// jq中事件委托
// $('ul').on('click', 'li', function () {
//     console.log(this);
// })
// $('ul').append('<li>555</li>')
//动态添加的事件也可以添加事件

取消事件绑定

off()

// 取消事件绑定 off()
            // $('.box').on('click mouseout',function () {
            //     console.log(111);
            // })
            // $('.box').off();//括号里什么也没有就把所有的事件都取消
            // $('.box').off('mouseout');//只取消其中一个事件
            // $('.box').on('click.a',function () {
            //     console.log(111);
            // })
            // $('.box').off('click');//这样也可以去掉
            // $('.box').on('click.b',function () {
            //     console.log(222);
            // })
            // // 有两个相同的事件，去掉其中的一个，给事件命名
            // $('.box').off('click.b');

单次事件绑定

one()

// 单次事件绑定 one（）
// $('.box').one('click',function () {
//     console.log(111);
// })

合成事件

hover()

// 合成事件 hover()
            $('.box').hover(function(){
                $(this).mouseover(function(){
                    console.log('别过来！')
                })
            },function(){
                $(this).mouseout(function(){
                    console.log('不要走！')
                })
            })

动画

三组显示和隐藏

// 第一组显示隐藏：show(time,easing,callback)显示 hide()隐藏 toggle()合成
// 改变的是宽高和透明度
// 参数分别是：time，时间，多长时间完成这件事；easing,速度；
// $('button').eq(1).click(function(){
//     $('.box').hide(2000)
// })
// $('button').eq(0).click(function(){
//     $('.box').show(2000)
// })
// $('button').eq(2).click(function(){
//     $('.box').toggle(1000);
// })
// 第二组显示隐藏：fadeIn()显示 fadeOut()隐藏 fadeTO()到多少 fadeToggle()合成
// 改变的是透明度
// $('button').eq(1).click(function(){
//     $('.box').fadeOut(2000)
// })
// $('button').eq(0).click(function(){
//     $('.box').fadeIn(2000)
// })
// $('button').eq(2).click(function(){
//     $('.box').fadeToggle(1000);
// })
// // $('button').eq(2).click(function(){
// //     $('.box').fadeTo(10000,.5);
// // })
//第三组显示隐藏：slideDown()显示 slideUp()隐藏 slideToggle()合成
// 改变的是高度
// $('button').eq(1).click(function(){
//     $('.box').slideUp(2000)
// })
// $('button').eq(0).click(function(){
//     $('.box').slideDown(2000)
// })
// $('button').eq(2).click(function(){
//     $('.box').slideToggle(1000);
// })

自定义动画方法

animate()

// $('.box').animate({width:'500px',height:'500px'},1000);//写在一块就同时进行
// $('.box').animate({height:'500px'},1000);//分开写就先执行上面的然后再执行下面的
// $('.box').animate({height:'500px'},1000).queue(function(next){
//css不会加入动画队列中，而是会立即执行，可以通过queue（）把css加入动画队列中
//     $('.box').css('background','pink');
//     next();
//next类似一个中间键
// }).delay(2000).animate({width:300},1000)
//delay，延迟两秒以后执行后面的
$('.box').animate({height:'500px'},1000);
// $('.box').stop(true);//只会停止上面的，不会影响下面的
$('.box').animate({width:'500px'},1000);
// $('.box').stop();停止当前的，走后面的动画
// $('.box').stop(true);//停止在它上面的所有动画
// $('.box').stop(true,true);//直接到达当前动画的最终状态 ，停止后续的动画
// $('.box').finish();//它上面所有动画均达到完成状态