newQuote练习

1实现自定义动画

通过jQuery的animate函数来实现

params是一个用大括号 包起来 的最终样式集合，也就是说能同时控制多个效果发生。

speed是关于速度的参数。

easing是关于速度的函数

fn回调函数

使用时注意：

• 实现多个元素一起同时进行动画

$("#div1").animate({width:"200px"}, 1000);
$("#div2").animate({width:"200px"}, 1000);
....

注意：这说明了js的动画效果是异步的，也就是说当前的动画效果和后边的回调函数是不会阻塞程序的执行

• 实现一个的元素的动画结束另外一个元素的动画开始

$("#div1").animate({width:"300px"}, 1000,function(){
    $("#div2").animate({width:"300px", 1000});
});

• 一个元素同时进行多个效果

$("#div1").animate({width:"300px", height:"300px"}, 1000);

• 实现单个元素一个动画完成才进行下一个动画

$("#div1").animate({width:"300px"}, 1000);
$("#div1").animate({height:"300px"}, 1000);
//或者
$("#div1").animate({width:"300px"}, 1000)
          .animate({height:"300px"}, 1000);
//再或者
$("#div1").animate({width:"300px"}, 1000,function(){
    $("#div1").animate({width:"300px", 1000});
});

这个地方有两点需要注意：

1. 同一个元素分两个animate设置动画，上一个动画的运行是会阻塞下一个动画的，这与不同元素的动画同时进行的异步是 相区别的。
2. $("#div1").animate的返回值还是jQuery的对象

2font Awesome的使用

这是一套图标字体库和css框架，是可缩放的矢量图标，用户可以对它进行图标的大小、颜色、阴影等进行操作。

（1）下载。http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip

（2）作为插件引入到html文件中。 

（3）使用。通常FontAwesome 与内联元素一起使用（如 i span ），可以在任何内联元素的地方的使用，只要在元素的类名前加上前缀fa，再在其后的加上图标名称

<span class="fa fa-qq"></span>

注意：使用上边的class设置类名之后，就不能再添加其他的类名了，否则会出现问题，至少目前我遇到的是这样。