jQuery編程動(dòng)畫的基本方法示例詳解

更新時(shí)間：2022年08月10日 08:58:30 作者：RiemannHypothesis

這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、動(dòng)畫

jQuery提供了一些列的動(dòng)畫基本方法，同時(shí)也提供了自定動(dòng)畫方案.animate()。

.show()

當(dāng)提供一個(gè) duration（持續(xù)時(shí)間）參數(shù)，.show()成為一個(gè)動(dòng)畫方法。.show()方法將為匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作。

持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。

出了上述時(shí)間，還可以自定時(shí)間，接受毫秒為參數(shù)

jQuery默認(rèn)只提供兩個(gè)緩沖效果：調(diào)用 swing, 在一個(gè)恒定的速度進(jìn)行；調(diào)用 linear. 更多的緩動(dòng)函數(shù)要使用的插件

$("button").click(function () {
  $("p").show("slow");
});

.hide()

$("#hidr").click(function () {
  $("div").hide(1000);
});

.fadeIn()

通過淡入的方式顯示匹配元素。

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

.fadeOut()

通過淡出的方式顯示匹配元素。

$("p").fadeOut("slow");

.animate()

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

.slideDown()

用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素。

$("div").slideDown("slow");

.slideUp()

$(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
        $("div").show("slow");
    } else {
        $("div").slideUp();
    }
});

.delay()

設(shè)置一個(gè)延時(shí)來推遲執(zhí)行隊(duì)列中后續(xù)的項(xiàng)。

$("div.first").slideUp(300).delay(800).fadeIn(400);

.clearQueue()

從列隊(duì)中移除所有未執(zhí)行的項(xiàng)。

$("#start").click(function () {
    $("div").slideUp(300).delay(800).fadeIn(400);
})
$("#stop").click(function () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});

.fadeTo()

調(diào)整匹配元素的透明度。

透明度的值為：0～1

$(this).fadeTo("fast", Math.random());

以上就是jQuery編程動(dòng)畫的基本方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于jQuery編程動(dòng)畫方法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

jQuery 美元符沖突的解決方法
jQuery 美元符沖突的解決方法，使用jquery與別的js庫共同使用的時(shí)候需要注意的地方。
2010-03-03
jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法,比較適合新手，也比較實(shí)用，需要的朋友可以參考下
2014-08-08
jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下
2015-10-10
jQuery 全選全部選反選實(shí)現(xiàn)代碼
上次做了一個(gè)前端項(xiàng)目，其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能，下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下
2016-08-08
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說明請看程序中的注釋。
2010-09-09
Javascript與jQuery方法的隱藏與顯示
這篇文章主要通過實(shí)例向大家介紹了Javascript與jQuery方法的隱藏與顯示的方法,需要的朋友可以參考下
2015-01-01
jQuery Tree Multiselect使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Tree Multiselect的使用方法，這個(gè)插件允許用戶以樹型的形式來呈現(xiàn)列表復(fù)選框的選擇，多用于權(quán)限管理中用于分配不同的權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jQuery使用cookie與json簡單實(shí)現(xiàn)購物車功能
這篇文章主要介紹了jQuery使用cookie與json簡單實(shí)現(xiàn)購物車功能的方法,介紹了jQuery實(shí)現(xiàn)購物車的步驟與關(guān)鍵代碼,需要的朋友可以參考下
2016-04-04
jquery實(shí)現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例
今天小編就為大家分享一篇jquery實(shí)現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法,涉及jQuery使用ajax交互實(shí)現(xiàn)動(dòng)態(tài)更新的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12