jQuery編程動畫的基本方法示例詳解
更新時間：2022年08月10日 08:58:30 作者：RiemannHypothesis
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
一、動畫
jQuery提供了一些列的動畫基本方法，同時也提供了自定動畫方案.animate()。
.show()
當提供一個 duration（持續(xù)時間）參數(shù)，.show()成為一個動畫方法。.show()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。
持續(xù)時間是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。
出了上述時間，還可以自定時間，接受毫秒為參數(shù)
jQuery默認只提供兩個緩沖效果：調用 swing, 在一個恒定的速度進行；調用 linear. 更多的緩動函數(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()
用滑動動畫顯示一個匹配元素。
$("div").slideDown("slow");
.slideUp()
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
.delay()
設置一個延時來推遲執(zhí)行隊列中后續(xù)的項。
$("div.first").slideUp(300).delay(800).fadeIn(400);
.clearQueue()
從列隊中移除所有未執(zhí)行的項。
$("#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編程動畫方法的資料請關注腳本之家其它相關文章！
相關文章
jQuery 美元符沖突的解決方法，使用jquery與別的js庫共同使用的時候需要注意的地方。2010-03-03
jquery 取子節(jié)點及當前節(jié)點屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點及當前節(jié)點屬性值的方法,比較適合新手，也比較實用，需要的朋友可以參考下2014-08-08
這篇文章主要介紹了jQuery實現(xiàn)帶漸顯效果的人物多級關系圖,可實現(xiàn)多種關系的顯示及點擊后漸顯切換效果,涉及jQuery響應鼠標事件動態(tài)修改頁面元素顯示效果的相關技巧,需要的朋友可以參考下2015-10-10
上次做了一個前端項目，其中有功能要求實現(xiàn)jquery 全選和反選功能，下面小編抽個時間把實現(xiàn)代碼分享到腳本之家平臺供大家參考下2016-08-08
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時首先依次引用Jquery，Jquery-Ui ，Draggable三個Js。然后在js中編寫相應的代碼，相關代碼說明請看程序中的注釋。2010-09-09
這篇文章主要通過實例向大家介紹了Javascript與jQuery方法的隱藏與顯示的方法,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jQuery Tree Multiselect的使用方法，這個插件允許用戶以樹型的形式來呈現(xiàn)列表復選框的選擇，多用于權限管理中用于分配不同的權限，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery使用cookie與json簡單實現(xiàn)購物車功能
這篇文章主要介紹了jQuery使用cookie與json簡單實現(xiàn)購物車功能的方法,介紹了jQuery實現(xiàn)購物車的步驟與關鍵代碼,需要的朋友可以參考下2016-04-04
jquery實現(xiàn)聯(lián)想詞搜索框和搜索結果分頁的示例
今天小編就為大家分享一篇jquery實現(xiàn)聯(lián)想詞搜索框和搜索結果分頁的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
jquery實現(xiàn)觸發(fā)時更新下拉列表內容的方法
這篇文章主要介紹了jquery實現(xiàn)觸發(fā)時更新下拉列表內容的方法,涉及jQuery使用ajax交互實現(xiàn)動態(tài)更新的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12