jQuery編程動畫的基本方法示例詳解
一、動畫
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());
以上就是jQuery編程動畫的基本方法示例詳解的詳細內容,更多關於jQuery編程動畫方法的資料請關註WalkonNet其它相關文章!