jq事件和动画

// $("#show").hide();

$("#btn").get(0).onclick = function(){

// //1.hide

// //$("#show").hide(3000);

// //可以接受一个回调函数,当动画执行完毕之后就会触发回调函数

// $("#show").hide(3000,"swing",function(){

// alert("已经完全隐藏");

// });

// //$("#show").hide(3000,);

//2. show

//$("#show").show(1000);

//}

//时间问题  可以添3个 slow fast normal    慢  快  中

// $("#show").hide("fast");

//3.toogle:显示或者隐藏当前元素

//$('#show').toogle(3000);

//4.fadeIn:先显示元素  后改变透明度(opactity)升为100%

//$('#show').fadeIn(3000)  接受三个参数

//5.fadeOut:将透明度逐渐将为0，再隐藏

//$('#show').fadeOut(3000)

//6.fadeToogle()有的话就隐藏  没有就显示

//7.slideDown: 以从上向下滑出来

//8.slideUp:  从下往上卷进去

//9.slideToogle  有就卷上去

//10.animate  3个参数

//参数1.结束的时候css 属性的值

//c参数2; 时间  参数3：代表的是回调函数

//背景色和组合写法不行

// $('#show').animate({

// width:'30px',

//// backgroundColor:"#0000",

//// border:'1px solid black'

// opacity:0.5,

// left:"500px",

// top:"600px"

// },3000,function(){

//

// alert(1);

//

// })

//

//11.stop停止动画

//$("#show").stop();

//12.delay 延迟执行动画  如果先执行延迟动画操作  需要先写延迟代码

// $("#show").delay(3000);

// $("#show").hide(1000);

//给box下面的son绑定事件

$('#box').on('click','#box',function(){

console.log(11);

})

/*one 方法  用这个去绑定的事件 只能执行一次

* 刷新页面有效

*/

// $('#box').one('click',function(){

// console.log(1111);

// })

}

//移除事件

function handle(){

console.log(1);

}

$('#box').on("click",handle);

$('#box').on("click",function(){console.log(2)})

$('#box').on("mouseover",function(){console.log(3)})

$(document).onkeydown(function(){

//移除单个

$('#box').off('click',handle);

//移除所有click事件

$("box").off('click');

//移除所有

$("#box").off();

}))

$('#box').on('click',function(){

console.log('box');

});

//实现不点box的时候也能执行事件回调函数

$(document).keydown(function(){

$('#box').trigger('click');

});

$('#box').click(function(event){

console.log(event);

alert(1);

});

$('#box').hover(function(){

console.log(11);

})

// $(window).resize(function(){

// alert(111);

// })

// jq绑定事件第一种方法  不用考虑兼容问题ie8不可以  能绑定多个

//

//  $('#box').on('click',function(){

//  alert(12);

//  })

//

//  $('#box').on('click',function(){

//  alert(52);

//  })

//

//2.jq绑定事件的第二种方法

// $("#box").bind("dblclick",function(){

// alert(12);

// })