jQuery動(dòng)畫及Ajax相關(guān)函數(shù)

基礎(chǔ)函數(shù)

hide()

隱藏被選元素,與 CSS 屬性 display:none 類似,隱藏的元素不會(huì)被完全顯示(不再影響頁面的布局)

$("button").click(function(){
    $("p").hide();
});   隱藏所有 <p> 元素

show()

顯示隱藏的被選元素。
適用于通過 jQuery 方法和 CSS 中 display:none 隱藏的元素(不適用于通過 visibility:hidden 隱藏的元素)。

$("button").click(function(){
    $("p").show();
});   顯示所有隱藏的 <p> 元素

toggle()

用于在被選元素上進(jìn)行 hide()和 show()之間的切換。
該方法檢查被選元素的可見狀態(tài)。如果一個(gè)元素是隱藏的,則運(yùn)行 show(),如果一個(gè)元素是可見的,則運(yùn)行 hide() - 這會(huì)造成一種切換的效果。

$("button").click(function(){
    $("p").toggle();
});   在所有 <p> 元素上進(jìn)行隱藏和顯示之間的切換

漸變效果函數(shù)

fadeIn()

用于淡入已隱藏的元素。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()

用于淡出可見元素。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeTo()

調(diào)整匹配元素的透明度,方法通過匹配元素的不透明度做動(dòng)畫效果(值介于 0 與 1 之間)。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

fadeToggle()

可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。

  1. 如果元素已淡出,則 fadeToggle() 會(huì)向元素添加淡入效果。
  2. 如果元素已淡入,則 fadeToggle() 會(huì)向元素添加淡出效果。
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

滑動(dòng)效果函數(shù)

slideUp()

用于向上滑動(dòng)元素。
用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁面的下面部分滑上去,當(dāng)一個(gè)隱藏動(dòng)畫后,高度值達(dá)到0的時(shí)候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局。 display 樣式屬性將被設(shè)置為none,以確保該元素不再影響頁面布局。

$("#filp").click(function(){
  $("#panel").slideUp();
});

slideDown()

用于向下滑動(dòng)元素。
用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁面的下面部分滑下去,彌補(bǔ)了顯示的方式.

$("#filp").click(function(){
  $("#panel").slideDown();
});

slideToggle()

可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。

  1. 如果元素向下滑動(dòng),則 slideToggle() 可向上滑動(dòng)它們。
  2. 如果元素向上滑動(dòng),則 slideToggle() 可向下滑動(dòng)它們。
$("#filp").click(function(){
  $("#panel").slideToggle();
});

自定義動(dòng)畫

animate()

用于創(chuàng)建自定義動(dòng)畫。( 默認(rèn)情況下,所有 HTML 元素都有一個(gè)靜態(tài)位置,且無法移動(dòng)。
如需對(duì)位置進(jìn)行操作,要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute!)

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

clearQueue()

清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫

$("button").click(function(){
$("div").clearQueue();
});   停止隊(duì)列中的剩余函數(shù)

finish()

停止當(dāng)前動(dòng)畫,并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)


stop()

停止當(dāng)前正在運(yùn)行的動(dòng)畫

$("#stop").click(function(){
  $("#panel").stop();
});

Ajax

ajax

用于執(zhí)行 AJAX(異步 HTTP)請(qǐng)求。所有的 jQuery AJAX 方法都使用 ajax() 方法,該方法通常用于其他方法不能完成的請(qǐng)求。

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});   使用 AJAX 請(qǐng)求改變 <div> 元素的文本

get

用于使用 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。

$("button").click(function(){
    $.get("demo_test.html",function(data,status){
        alert("Data: " + data + "nStatus: " + status);
    });
});   發(fā)送一個(gè) HTTP GET 請(qǐng)求到頁面并取回結(jié)果

$.get("test.php");  請(qǐng)求 "test.php",但是忽略返回結(jié)果

$.get("test.php", { name:"Donald", town:"Ducktown" });   請(qǐng)求 "test.php" 并連同請(qǐng)求發(fā)送一些額外的數(shù)據(jù)(忽略返回結(jié)果)

$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });   請(qǐng)求 "test.php" 并傳遞數(shù)據(jù)數(shù)組到服務(wù)器(忽略返回結(jié)果)

$.get("test.php", function(data){
alert("Data: " + data);
});    請(qǐng)求 "test.php" 并提醒請(qǐng)求的結(jié)果:

getJSON

用于使用 AJAX 的 HTTP GET 請(qǐng)求獲取 JSON 數(shù)據(jù)。

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});   使用 Ajax 請(qǐng)求獲取 JSON 數(shù)據(jù),并輸出結(jié)果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容