日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery編程動畫的基本方法示例詳解_jquery

作者：RiemannHypothesis ? 更新時間： 2022-10-05 編程語言

一、動畫

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

.show()

當提供一個 duration（持續時間）參數，.show()成為一個動畫方法。.show()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。

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

出了上述時間，還可以自定時間，接受毫秒為參數

jQuery默認只提供兩個緩沖效果：調用 swing, 在一個恒定的速度進行；調用 linear. 更多的緩動函數要使用的插件

$("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()

用滑動動畫顯示一個匹配元素。

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

.slideUp()

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

.delay()

設置一個延時來推遲執行隊列中后續的項。

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

.clearQueue()

從列隊中移除所有未執行的項。

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

.fadeTo()

調整匹配元素的透明度。

透明度的值為：0～1

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

原文鏈接：https://juejin.cn/post/7129899850581147679

欄目分類
最近更新