JQuery 学习纪录 ( 4 )

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);            });