欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解jquery中的事件與動畫

 更新時間：2016年05月24日 11:26:00   投稿：jingxian  
下面小編就為大家?guī)硪黄钊肜斫鈐query中的事件與動畫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.鼠標(biāo)事件

 

eg：光棒效果

$(function () {
   $('li').mouseover(function () { //鼠標(biāo)移過時
    $(this).css('background','blue');
   }).mouseout(function () { //鼠標(biāo)移過后
    $(this).css('background','');
   });

  });

2.鍵盤事件

3.表單事件

 eg：輸入框的文字顯示效果

// 查詢輸入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("請輸入要查詢的問題"); 
  });

4.綁定事件與移除事件

 bind():綁定事件

01.綁定一個

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

02.綁定多個

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

 unbind([type],[fn]):移除事件

當(dāng)unbind()不帶參數(shù)時，表示移除所綁定的全部事件

5. 復(fù)合事件

 1.hover()方法 

  hover()方法相當(dāng)于mouseover與mouseout事件的組合，用于模擬鼠標(biāo)指針懸停事件

        

 2.toggle()方法 （在j 1.7后就刪除，不建議使用）

  toggle()方法用于模擬鼠標(biāo)連續(xù)click事件

2.toggle()方法 （在j 1.7后就刪除，不建議使用）

  toggle()方法用于模擬鼠標(biāo)連續(xù)click事件

$("body").toggle(
function () { }, //第一次點擊觸發(fā)
function () { }, //第二次點擊觸發(fā)
function () { } //第三次點擊觸發(fā)
...     //...
);

同時toggle()方法還有一個作用：切換元素可見狀態(tài)

$('input').toggle( 
  function () {
  $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示
  },
  function () {
   $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示
  }
 );

二：動畫

1.顯示及隱藏元素

show() 在顯示元素時，能定義顯示元素時的效果，如顯示速度

$(".tipsbox").show("slow");//以較慢的速度顯示元素

hide() 隱藏元素

$(".tipsbox").hide("slow");//以較慢的速度隱藏元素

這里補充一個is()方法的使用，可以用來判斷是顯示還是隱藏。

eg：

$('input').bind('click', function () {
    if ($(this).is(':visible')) {//如果內(nèi)容為顯示
     $(this).hide();
    } else {
     $(this).show();
    }
   })

2.切換元素可見狀態(tài)（toggle()）

 toggle()除了可以模擬鼠標(biāo)的連續(xù)單擊事件外，還能用于切換元素的可見狀態(tài)

$("li:gt(5):not(:last)").toggle();//是隱藏則顯示，是顯示則隱藏

3.淡入淡出效果

fadeIn()和fadeOut()可以通過改變元素的透明度實現(xiàn)淡入淡出效果

$("input[name=fadein_btn]").click(function(){
  $("img").fadeIn("slow"); //以較慢的速度淡入

});
$("input[name=fadeout_btn]").click(function(){
  $("img").fadeOut(1000); //以1000毫秒的速度淡出

});

4.改變元素的高度

slideDown() 可以使元素逐步延伸顯示，slideUp()則使元素逐步縮短直至隱藏

$("h2").click(function(){
  $(".txt").slideUp("slow");
  $(".txt").slideDown("slow");
});

三：自定義動畫

詳情 點擊 深入理解jquery自定義動畫animate()

你一定會有所收獲的！

以上這篇深入理解jquery中的事件與動畫就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論