jQuery動畫

2024-04-27 15:15:12

字體：大中小

來源：轉載

供稿：網友

鼠標事件 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);});

上一篇：文本溢出邊界顯示為省略號

下一篇：NodeJS返回JSON數據填充到Bootstrap的模態框中！