jQuery动画

2019-11-02 18:32:11

字体：大中小

来源：转载

供稿：网友

鼠标事件 1.1 click 1.2 mouSEOver 1.3 mouseout$(".nav li").click(function(){ $(this).addClass("redColor");});//鼠标放上来$("li").mouseover(function(){ $(this).addClass("redColor");});//鼠标离开$("li").mouseout(function(){ $(this).removeClass("redColor");});键盘事件 2.1 keydown 2.2 keyup 2.3 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//////////////");});焦点事件 3.1 focus 3.2 blur$(".inputName").focus(function(){$(this).CSS("background-color", "orange");});$(".inputName").blur(function(){ $(this).css("background-color", "blue");});复合事件 4.1 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); });

4.2 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();});动画 5.1 show() 5.2 hide() 5.3 toggle() 滑动：由左至右 5.4 slideToggle 滑动：由下至上 5.5 fadeIn() 5.6 fadeOut()setInterval(function(){ $("div").fadeIn(500).fadeOut(500);});

5.7 slideUp() 5.8 slideDown()

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

5.8 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);});

上一篇：文本溢出边界显示为省略号

下一篇：css3样式书写ICON图标

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注