使用animate.css动画插件

        1.提示:使用animate.css导航里面的li或者a后面的线不能用border,用背景图
2.将animate.css在头部链接上
3.在animate.css官网上看看用什么动画和需用动画的名字
http://daneden.github.io/animate.css/
4.在js中把想给动画的元素加两个类就可以,第一个类固定是animated,第二个类是动画的名字(也可以直接在HTML里面直接加)
$(".slide-introduce li:eq(0)").addClass("animated bounceInLeft");
5.如果动画需要延时就给属性一个css,注意要写浏览器前缀,不写只有IE和360急速能用----------------这里要添加上浏览器的各个前缀-----------------
animation-delay:2s; //动画延迟出来     
animation-duration:3s; //动画花费的时间
animation-iteration-count:2; //动画播放次数
6.动画效果执行完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);


    $(function(){
        $(".content").mouseover(function(){
            $(this).stop().animate({
                width: "100px"
            }).mouseout(function(){
                $(this).stop().animate({
                    width:"10px"
                });
            });
        });
    })