jQuery常见的事件和效果

一、jQuery常见的事件

on：添加事件/事件委托

off：删除事件

$('#btn').on({
			'click': function(){
				console.log('click')
			},
			'mouseenter': function(){
				console.log('mouseenter')
			}
		})

trigger: 主动触发事件,会触发浏览器默认行为

triggerHandler: 主动触发事件

$('#btn').trigger('click')
$('#btn').triggerHandler('mouseenter')

hover([over,]out)

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

click

点击事件

$("p").click( function () { $(this).hide(); });

鼠标事件

mousedown：鼠标按下

mouseup：鼠标松开

mouseenter：鼠标移入

mouseleave：鼠标移出

mousemove：鼠标移动

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

二、jQuery效果

重点掌握

show(), hide()

fadeIn(), fadeOut()

animate, stop

一般写法： stop().animate()

show：显示隐藏的匹配元素

hide：隐藏显示的元素

fadeIn:淡入

fadeOut：淡出

fadeToggle：显示淡出，隐藏淡入（当透明度开始时去除display样式）

slideDown 动画显示隐藏元素

slideToggle 动画切换隐藏与显示元素

slideUp 动画隐藏显示元素

//先给body添加一个按钮btn，两个div盒子，使用display：none隐藏其中一个
//<button id="btn">开始动画</button>
//<div style="height: 100px;width: 100px;background: red;"></div>
//<div style="height: 100px;width: 100px;background: green;display: none;"></div>

$('#btn').clicl(function(){
    $('div').show()
    $('div').show(2000)//动画时长2000毫秒
    
    $('div').hide()
	$('div').hide(2000)//动画时长2000毫秒
    
    $('div').fadeIn(3000)//动画时长3000毫秒
    $('div').fadeOut(3000)动画时长3000毫秒
    $('div').fadeToggle(3000)
    $('div').fadeTo(2000, 0.4)
    
    $('div').slideDown(1000)
    $('div').slideUp(1000)
    $('div').slideToggle(1000)
})

animate:同时执行多个属性的动画

//添加一个div和按钮
//<div id="box" style="width: 100px; height: 100px; background: gold; position: absolute; left: 50px; top: 200px;"></div>
//<button id="btn">开始动画</button>
$('#btn').click(function(){
    $('#box').animate({left: 200}, 1000)
		.animate({top: 300}, 1000)
		.fadeOut(1000)
		.fadeIn(1000)
		.animate({width: 200}, 1000)
		.animate({height: 200}, 1000)
})

stop：停止动画

//添加一个停止按钮
//<button id="stop">stop</button>
$('#stop').click(function(){
			// $('#box').stop()  // 只能停止当前正在执行的动画
			$('#box').stop(true)  // 停止所有动画
		})