jQuery动画

鼠标事件

click

mouseover

mouseout

$(".nav li").click(function(){
    $(this).addClass("redColor");
});
//鼠标放上来
$("li").mouseover(function(){
    $(this).addClass("redColor");
});
//鼠标离开
$("li").mouseout(function(){
    $(this).removeClass("redColor");
});

键盘事件

keydown

keyup

keypress

//事件触发顺序：keydown - > keypress - > keyup
//keydown和keyup不分大小写 keyCode都是65-90,keypress区分大小写 大写是65-90 小写97-122
$("input[name=userName]").keydown(function(event){ //鼠标按下去
$("#desc").append(event.keyCode + "，keydown、");
}).keypress(function(event){ //与keydown类似，不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应
    $("#desc").append(event.keyCode + "，keypress、");
}).keyup(function(event){  //松开鼠标
$("#desc").append(event.keyCode + "，keyup//");
});

焦点事件

focus

blur

$(".inputName").focus(function(){
$(this).css("background-color", "orange");
});
$(".inputName").blur(function(){
    $(this).css("background-color", "blue");
});

复合事件

hover

$(".myOrder").hover(
    function(){
        $(".menu_2").css("display", "block");
$(".menu_2").stop(true, true).show(1000);
//.stop(true, true)表示停止之前的动画
    },
    function(){
        $(".menu_2").css("display", "none");
$(".menu_2").stop(true, true).hide(1000);
    }
);

toggle

//循环切换事件
$("body").toggle(
    function(){
        $(this).css("background-color", "red");
    }, 
    function(){
        $(this).css("background-color", "blue");
}, 
    function(){
        $(this).css("background-color", "yellow");
}
);
//切换是否可见
$('.more').click(function(){
    $('tr:gt(4)').toggle();
});

动画

show()

hide()

toggle()

滑动：由左至右

slideToggle

滑动：由下至上

fadeIn()

fadeOut()

setInterval(function(){
    $("div").fadeIn(500).fadeOut(500);
});

slideUp()

slideDown()

$(function(){
    $("input[type=button]").click(function(){
        $(".txt").slideUp("show");
        $(".txt").slideDown("show");
    });
});

animate

//切换可见状态:从右到左隐藏
$(".btn").click(function(){
    $(".addContent").toggle("slow");
});
//切换可见状态：从下到上进行隐藏
$(".btnSlideToggle").click(function(){
    $(".addContent").slideToggle("slow");
});
//切换可见：从右上角到左下角
$(".btnanimate").click(function(){
    $(".addContent").animate({
        "width":'0px',
        "height":'0px',
        "opicty":'0',
        "margin-top":'300px'
    }, 1000).animate({
        "width":'300px',
        "height":'300px',
        "opicty":'1',
        "margin-top":'0px'
    }, 1000);
});