jQuery事件与动画超详细讲解

jQuery事件

什么是事件？

事件是指用户在网页中发生的一系列动作，例如：鼠标单击、双击、拖拽、键盘按键等。

jQuery处理事件

jQuery提供了方便的事件处理函数，使用这些函数可以轻松实现事件绑定、事件解绑、事件触发等功能。

事件绑定

使用on()方法可以为一个元素绑定一个或多个事件处理函数。

$(selector).on(event, function)

其中，selector表示需要绑定事件的元素，event为事件类型，function为事件处理函数。

例如：

$("button").on("click", function(){
    alert("按钮被单击了！");
});

事件解绑

使用off()方法可以为一个元素解绑一个或多个事件处理函数。

$(selector).off(event, function)

例如：

$("button").off("click", function(){
    alert("按钮被单击了！");
});

事件触发

使用trigger()方法可以手动触发一个事件。

$(selector).trigger(event)

例如：

$("button").trigger("click");

jQuery动画

什么是动画？

动画是指在网页中实现元素的平移、旋转、缩放等效果，可以为用户带来更好的视觉体验。

jQuery处理动画

jQuery提供了大量的动画效果及方法，使用这些方法可以轻松实现动画效果。

基础动画

显示和隐藏

使用show()方法可以显示一个隐藏的元素，使用hide()方法可以隐藏一个元素。

$(selector).show(speed, callback)
$(selector).hide(speed, callback)

其中，speed为动画的速度，callback为动画完成后执行的回调函数。

例如：

$("button").click(function(){
    $("#div1").show();
});

$("button").click(function(){
    $("#div1").hide();
});

淡入淡出

使用fadeIn()方法可以实现淡入效果，使用fadeOut()方法可以实现淡出效果。

$(selector).fadeIn(speed, callback)
$(selector).fadeOut(speed, callback)

例如：

$("button").click(function(){
    $("#div1").fadeIn();
});

$("button").click(function(){
    $("#div1").fadeOut();
});

滑动

使用slideDown()方法可以实现向下滑动效果，使用slideUp()方法可以实现向上滑动效果。

$(selector).slideDown(speed, callback)
$(selector).slideUp(speed, callback)

例如：

$("button").click(function(){
    $("#div1").slideDown();
});

$("button").click(function(){
    $("#div1").slideUp();
});

链式动画

可以使用链式调用实现多个动画效果的组合。

$(selector).animate(props,speed,easing,callback)

其中，props为目标样式，speed为动画的速度，easing为动画的缓动函数，callback为动画完后执行的回调函数。

例如：

$("button").click(function(){
    $("#div1").animate({left:'500px', opacity:'0.5'}, 2000);
});

$("button").click(function(){
    $("#div1").animate({left:'500px'}).animate({top:'100px'});
});

示例说明

示例 1

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").slideDown();
        $("#div3").animate({left:'500px'}, 2000);
    });
});

该示例为页面加载完成后，当按钮被单击时，依次实现div1的淡入效果、div2的向下滑动效果和div3的向右平移动画效果。

示例 2

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").animate({left:'500px'},"slow");
        $("#div2").animate({top:'100px'},"slow");
    });
});

该示例为页面加载完成后，当按钮被单击时，同时实现div1的向右平移动作效果和div2的向下平移动画效果，且两个动作都使用缓动函数slow，速度较慢，视觉效果明显。