1. 程式人生 > >jQuery自帶的幾個基本動畫

jQuery自帶的幾個基本動畫

顯隱效果

這是最簡單的效果,使p元素顯示或者隱藏。

其中toggle([duration],[easing],[callback])可以使元素在顯示隱藏之間相互切換

duration為一個字串或數字,決定動畫執行時間

easing為一個字串,用來表示使用哪個緩衝函式來過渡

callback表示在動畫完成時執行的函式。

$("p").show();   //顯示
$("p").hide();   //隱藏

$('button').click(function(){
    $("p").toggle();   //顯示隱藏相互切換
});

滑動效果

用法相同,slideDown()/slideUp分別表示滑動效果顯示/隱藏元素

slideDown([duration],[callback])   //滑動顯示
slideDown([duration],[easing],[callback])
slideUp([duration],[callback])     //滑動隱藏
slideUp([duration],[easing],[callback])


slideToggle([duration],[easing],[callback])    //滑動切換

淡入淡出

淡入淡出與前兩個不同的是,多了一個fadeTo([duration],opacity,[easing],[callback])方法,該方法表示把匹配元素的不透明度以漸進的方式調整到指定的不透明度。

fadeIn([duration],[callback])   //淡入顯示
fadeIn([duration],[easing],[callback])
fadeOut([duration],[callback])     //淡出隱藏
fadeOut([duration],[easing],[callback])

fadeToggle([duration],[easing],[callback])   //漸變切換