JQ动画效果

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记
首先我们常用的动画有，显示与隐藏，滑动与卷动，淡入与，自定义动画等。在下面还会记下方法如列队动画方法，那就开始咯

首先是几个基本动画

显示和隐藏

//.show()，可以传参控制速度等有slow nromal fast或者是毫秒数，还可以传入回掉函数
$('div')click(function(){
    $('#div').show(1000,function(){
        alert('1');
    });//速度1秒完成,完全显示出来后弹窗
})
//.hide()
$('div')click(function(){
    $('#div').hide('fast',function(){
        alert('2')
    });//速度1秒完成,隐藏后弹窗
})
//还有一些高级用法-调用自身
//如果我们有多个地方需要动画，并且不希望他们同时显示，那我们就需要列队动画，让他们排着队的出来
//列队动画,递归自调用
$('div').click(function(){
    $('.div').first().show('fast',function testShow(){
        $(this).next().show('fast',testShow);
    })
})
$('div').click(function(){
    $('.div').last().hide('fast',function testShow(){
        $(this).prev().hide('fast',testShow);
    })
})
//如果是匿名函数怎么调用自身呢
$('div').click(function(){
    $('.div').last().hide('fast',arguments.callee);
})
//下面就是组合按钮，toggle
$('div').click(function(){
    $(div).toggle('fast');
})

滑动和滚动，参数和显示隐藏是一样的！！

$('div').click(function(){
    $(div).slideUp('fast');
})
$('div').click(function(){
    $(div).slideDown('fast');
})
$('div').click(function(){
    $(div).slideToggle('fast');
})

淡入淡出

$('div').click(function(){
    $(div).fadeOut('fast');
})
$('div').click(function(){
    $(div).fadeIn('fast');
})
$('div').click(function(){
    $(div).fadeToggle('fast');
})
$('div').click(function(){
    $(div).fadeTo('fast',0.3);//0-1之间  透明度到多少
})

---

自定义动画因为基础动画无法满足我们的需求，所以出现了自定义动画.animate()

$('.button').click(function(){
    $('#div').animate({//同步的
        width:'300px',
        height:'200px',
        opacity:0.5,
        fontSize:'50px'
    },1000,function(){
        alert('1');
    });
})
//当然我们也可以让位置变换，需要我们在CSS设置绝对定位，这样我们就可以使用top，left来控制位置
$('.button').click(function(){
    $('#div').animate({
        left:'300px',
        top:'200px',
    },1000)
})
//上面的只有第一次点击才有效，如何实现多次点击都有效呢
$('.button').click(function(){
    $('#div').animate({
        left:'+=300px',
        top:'+=200px',
    },1000)
})
//自定义队列动画，我们可以通过回掉函数不停地嵌套来实现但是太多容易乱
$('.button').click(function(){
    $('#div').animate({
        width:'300px'
    },function(){
        $('#div').animate({
            height:'200px'
        })
    })
})
//还有一种方法就是连缀和顺序执行，但必须是同一个元素的基础上使用连缀和顺序排列
$('.button').click(function(){
        $('#div').animate({width:'300px'})
                 .animate({height:'200px'})
                 .animate({opacity:0.5});
})
$('.button').click(function(){//顺序执行
        $('#div').animate({width:'300px'});
        $('#div').animate({height:'200px'});
        $('#div').animate({opacity:0.5});
})
//如果作用在不同元素上，就不能一一执行，就会分别开始执行自己的，不过分别是列队动画
$('.button').click(function(){
        $('#div').animate({width:'300px'});
        $('#div1').animate({height:'200px'});
        $('#div').animate({opacity:0.5});
})
//这样我们就需要使用队列动画方法才能实现多种元素的队列动画，先看一个CSS列子
$('.button').click(function(){
    $('#div').slideUp('slow').slideDown('slow').css("backgroud","red");
})//这样会出现什么效果呢，先执行CSS，之后在执行动画方法
//queue方法便可以实现，但无法在后面直接家方法，类似连缀那种，但他有自己的传参实现
$('.button').click(function(){
    $('#div')
            .slideUp('slow')
            .slideDown('slow')
            .queue(function(next){
                $(this).css("backgroud","red");
                next();
            })
            .hide('1000');
});
//这个函数也可以算队列里的长度
$('#div').queue('fx').length//参数一定要传这个，每执行一个就会从队列中减少一个
//清理运动，当有无限运动是满足某条件时用到这个
$('.button').click(function(){
    $('#div')
            .slideUp('slow')
            .slideDown('slow',function(){$(this).clearQueue()})//清理
            .queue(function(next){
                $(this).css("backgroud","red");
                next();
            })
            .hide('1000');
});
//有一个参数可以控制运动方式,但有很多需要插件，自带的有swing缓动和linear匀速，默认的是swing
$('.button').click(function(){
    $('#div').animate({
        left:'800px'
    },'slow','swing')
})

---

动画相关方法
很多时候我们需要正在运行的动画，JQ提供了.stop()方法
.stop(clearQueue,gotoEnd) 第一个参数是一个布尔值，代表将未执行完的动画列表清空，第二个就是
将正在执行的动画直接跳转到当前动画的末位置，注意不是最后一个动画的末位置
stop

$('.button').click(function(){
    left:'800px'
},1000)
$('.stop').click(function(){
    $('#div').stop();//单纯停止
})


----------


$('.button').click(function(){
    $('#box').animate({left:'300px'})
             .animate({bottom:'300px'})
             .animate({top:'300px'})
             .animate({right:'300px'})
})
$('.stop').click(function(){
    $('#div').stop();//如果是列队动画停止的话，会停止第一个列队动画，执行后面的列队动画
    $('#div').stop(true);//清除后面的动画，及完全停止默认值false
    $('#div').stop(true,true);//直接到该步动画的末位置
})

delay延时

$('.button').click(function(){
    $('#box').animate({left:'300px'})
             .animate({bottom:'300px'}).delay(2000)
             .animate({top:'300px'})
             .animate({right:'300px'})
})

一个动画过滤器来判断哪个动画在运动 :animated

$('div').click(function(){
    $(':animated').css("background","red");
})

动画的全局属性

$.fx.interval=13//运行的帧数，越小越流畅，默认13，但越小对性能要求越高
$.fx.off=true;//关闭动画，用来兼容，用处比较少
$('.button').click(function(){
    $('#div').toggle(1000)
})