8-1. jQuery特效:基礎、滑動特效

基礎特效

1)hide方法

隱藏匹配的元素,有三個參數可以傳,不傳參數表示立刻隱藏

hide( [duration] [, easing] [, complete] ) 

 

1. duration:一個字符串或者數字決定動畫將允行多久,如果不傳第一個參數,但是傳了後面的參數字符串 'fast' 和 'slow',

                分別代表200和600毫秒

<script type="text/javascript">
$(function () {
    $('button').on('click',function () {
        //不傳參數代表立刻隱藏
        $('#div1').hide('slow');
    });
});
</script>
</head>
<body id="body">
    <button>點我試試</button>
    <div id="div1"></div>

 

2. easing:一個字符串,表示過度使用哪種緩動函數(默認:swing)

                 jQuery自身提供"linear"和"swing",其他過渡效果可以使用相關的插件完成

 

3. complete:在動畫執行時完成的函數,函數內部的this指向指向執行動畫的DOM元素

 

2)show方法

顯示匹配的元素

show( [duration] [, easing] [, complete] )

 

3)toggle方法

顯示或隱藏方法 

1. toggle( [duration] [, easing] [, complete] )

2. toggle(Boolean) 一個布爾值,使用 true 來顯示元素,或 false 隱藏它

 

滑動特效

1)slideDown方法

用滑動動畫顯示匹配元素

slideDown( [duration] [, easing] [, complete] )

 

2)slideUp方法

用滑動動畫隱藏匹配元素

slideUp( [duration] [, easing] [, complete] )

 

3)slideToggle方法

用滑動動畫顯示或隱藏匹配元素

slideToggle( [duration] [, easing] [, complete] )

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章