jQuery編程動(dòng)畫的基本方法實(shí)例分析

今天小編給大家分享一下jQuery編程動(dòng)畫的基本方法實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、動(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)畫的基本方法實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。