show與hide動畫

show不傳參數,會沒有動畫效果。
show傳參數,會有動畫效果。
參數為speed:動畫持續時間,可以是毫秒值(200ms),或固定字符串('fast','normal','slow')。

        $('input').eq(0).click(function () {

            $('div').show();
            $('div').show('fast');
        });
        $('input').eq(1).click(function () {
            // 還可加回呼函數
            $('div').hide(200, function () {
                console.log('完成隱藏')
            });
        });

基本動畫

滑入滑出slideDown,slideUp,slideToggle(淡入,淡出,切換)。

            // 不加參數,預設為normal
            $('input').eq(0).click(function () {
                $('div').fadeIn(2000);
            });
            $('input').eq(1).click(function () {
                $('div').fadeOut();
            });
            $('input').eq(2).click(function () {
                $('div').fadeToggle();
            });

自定義動畫

animate為自定義動畫的方法,且他有四個參數,第一個必填。
第一個參數為物件,為樣式。
第二個參數為speed,動畫持續時間。
第三個參數為動畫執行效果(預設為swing如同鞦韆前後都很慢,中間最快),linear為均勻速度。
第四個參數為回呼。

        $('input').eq(0).click(function () {
            $('#box1').animate({
                left: 500
            }, 2000);
            $('#box2').animate({
                left: 500
            }, 2000, 'swing', function () {
                console.log('我是swing的回呼')
            });
            $('#box3').animate({
                left: 500
            }, 2000, 'linear', function () {
                console.log('我是linear的回呼')
            });
        });
        

stop():可停止當前運行的動畫

動畫佇列 :當在jQ物件上呼叫動畫方法時,如果物件正在執行某動畫,那麼新呼叫的動畫方法就會被新增到動畫佇列中,jQ會按順序依次執行動畫佇列的每個動畫。

                $('#btn').click(function () {
                // 將新增的動畫放置佇列裡面等待，並按順序依次執行動畫佇列的每個動畫
                $('div').animate({
                    left: 500
                }).animate({
                    top: 400
                }).animate({
                    width: 300,
                    height: 300
                }).animate({
                    left: 10
                }).animate({
                    top: 30
                }).animate({
                    width: 100,
                    height: 100
                })
            });
            

stop()有兩個參數 clearQueue 是否要清除佇列中所有的動畫，jumpToEnd 是否跳到當前動畫最終效果。

             // 會做下拉及收回方塊
            $('#btn1').click(function () {
                $('div').slideDown(1000).slideUp(1000).fadeIn(2000).fadeOut(2000);
            });
            // 當在下拉時,按下stop會停止當前動畫,並將在佇列的動畫拿過來,直接執行
            $('#btn2').click(function () {
            // clearQueue為true清除掉在佇列中的所有動畫,
            // jumpToEnd為true所以會直接跳到最後一個效果,但如果後面動畫都被清除就只會執行完當前動畫
                $('div').stop(true, true);
            });