回味jQuery系列（2）-动画效果

摘要：参数代表回调函数。参数为变化样式的对象必传，速度可选，回调函数可选。这是，肯定会想到采用回调函数来解决。确实可以解决问题，但是当列队动画变多时，回调函数的可读性大大降低确实一个非常烦人的问题。提供了一个类似于回调函数的方法。

动画可以给网站的用户体验加分，让网页更加活泼。不过，什么东西都需要适量，简易快捷的动画会给网站加分不少。比如购物网站的个人中心按钮hover效果啊，各种hover产生的动画等。不过，现在CSS3的新特性可以模拟很多动画，可以多用CSS3去实现一些动画效果了。比如box-shadow，text-shaow，animation，transform等。jquery作为全明星级别插件，是有很强的动画功能的。

jQuery在动画中提供了两个全局属性（不常在代码中使用），分别为：
$.fx.interval，设置每秒运行的帧数，默认13ms，越小越流畅，但太小耗费浏览器性能
$.fx.off，关闭页面上所有的动画，浏览器不支持动画时可以全部关掉。

$.fx.interval = 100; //默认为13
$.fx.off = true; //默认false

那么，我们看看jquery都提供了哪些动画方法。

jQuery 中显示方法为：.show(speed,callback)，隐藏方法为：.hide(speed,callback)。在无参数的时候，只是硬性的显示内容和隐藏内容。

$(".show").click(function () { 
    $(".xzavier").show();
});
$(".hide").click(function () { 
    $(".xzavier").hide();
});

两个可选参数。参数speed，毫秒，表示运动所花时间，用速度来说更切合动画一词。可以是number，也可以是这个三个参数字符串：slow、normal 和fast，分别对应600ms、400 ms和200ms。如果传参错误或者不传，默认normal，即400ms。参数callback代表回调函数。

$(".show").click(function () {
    $(".xzavier").show("fast"); 
});
$(".show").click(function () {
    $(".xzavier").show("");   //normal
});

$(".show").click(function () {
    $(".xzavier").show("fast", function () {
        console.log("animation is over");  //其他可执行代码
    });
});

原理上，.hide(speed,callback)方法其实就是在行内设置CSS 代码：display:none; 而.show(speed,callback)方法要根据原来元素是区块还是内联来决定，如果是区块，则设置CSS 代码：display:block; 如果是内联，则设置CSS 代码：display:inline。

.show()和.hide()的在同一元素的时候，需要一个按钮切换操作，或者需要进行一些条件判
断。而jQuery 提供给我们一个类似功能的独立方法：.toggle(speed,callback)，自动切换。

$(".toggle").click(function () {
    $(this).toggle("fast");
});

jQuery 提供了一组改变元素高度的方法：.slideUp(speed,callback)，向上收缩、.slideDown(speed,callback)，向下展开和.slideToggle(speed,callback)，自动切换。

$(".slidedown").click(function () {
    $(".xzavier").slideDown("slow");
});
$(".slideup").click(function () {
    $(".xzavier").slideUp();
});
$(".slidetoggle").click(function () {
    $(".xzavier").slideToggle("fast");
});

jQuery 提供了一组专门用于透明度变化的方法：.fadeIn(speed,callback)，淡入、.fadeOut(speed,callback)，淡出、.fadeToggle(speed,callback)，自动切换。

$(".fadein").click(function () {
    $(".xzavier").fadeIn("slow");
});
$(".fadeout").click(function () {
    $(".xzavier").fadeOut();
});
$(".fadetoggle").click(function () {
    $(".xzavier").fadeToggle("fast");
});

这三个方法只能透明度变化只能从0 到100，或者从100 到0。不能自己设定变化到一个值。不过，jQuery提供了.fadeTo(speed,opacity，callback)方法解决了这个问题。

$(".fadeto").click(function () {
    $(".xzavier").fadeTo("1000", 0.4); //0.4代表上面方法的30
});

如果本身透明度大于指定值，会淡出，否则相反。

jQuery提供了几种简单常用的固定动画方法供开发使用。随着业务逻辑的复杂，这些简单动画无法满足我们更加复杂的需求。这时，开发可以使用jQuery提供了一个.animate(params,speed,easing,callback);方法来创建我效果更为复杂的自定义动画。
参数为：CSS变化样式的对象（必传），速度（可选），回调函数（可选）。easing后面解释。

.xzavier {width:200px;height:100px;opacity:1;}
$(".animate").click(function () {
    $(".xzavier").animate({
        "width" : "800px",
        "height" : "400px",
        "opacity" : 0.3
    });
});

class为xzavier的盒子多重动画同步运动。变宽，变长，变淡。

$(".animate").click(function () {
    $(".xzavier").animate({
        "top" : "400px", 
        "left" : "200px"
    });
});

如果元素位置需要运动变化，需要设置元素的position为absolute。

jQuery还提供了自定义动画的累加、累减功能。

$(".animate").click(function () {
    $(".xzavier").animate({
        "top" : "+=100px",
        "left" : "+=100px"
    });
});

包括jquery固定的几个动画在内，都有可选参数easing，即运动方式，seasing有两个值：swing(缓动)、linear(匀速)，默认为swing。不过这个参数很少用到O(∩_∩)O~

$(".animate").click(function () {
    $(".xzaiver").animate({
        left : "800px"
    }, "slow", "swing");
    $(".xzavier").animate({
        top : "40px"
    }, "fast", "linear");
});

自定义实现列队动画的方式，有3种：
1.在回调函数中再执行一个动画

$(".animate").click(function () {
    $(".xzavier").animate({
        "left" : "800px"
    }, function () {
        $(".xzavier").animate({
            "top" : "400px"
        }, function () {
            $(".xzavier").animate({
                "opacity" : 0.3
            });
        });
    });
});

2.通过连缀来实现列队动画

$(".animate").click(function () {
    $(".xzavier").animate({
        "left" : "800px"
    }).animate({
        "top" : "400px"
    }).animate({
        "opacity" : 0.3
    });
});

3.通过顺序来实现列队动画（需要时同一元素动画，否则，就是同步动画）

$(".animate").click(function () {
    $(".xzavier").animate({"left" : "100px"});
    $(".xzavier").animate({"top" : "100px"});
    $(".xzavier").animate({"opacity" : 0.3});
});

这样来看，我们更倾向于后面两种写法，因为嵌套多了就出现了}}}}}}}}}}

先看个问题：

//连缀
$(".xzavier").slideUp().slideDown().css("background", "#ccc");

这里面css方法并不是动画方法，不会排在列队之后执行，但是，我们又需要它在前面动画执行之后再执行。这是，肯定会想到采用回调函数来解决。

$(".xzavier").slideUp().slideDown(function () {
    $(this).css("background", "#ccc");
});

确实可以解决问题，但是当列队动画变多时，回调函数}}}}}}}}}}的可读性大大降低确实一个非常烦人的问题。jQuery 提供了一个类似于回调函数的方法：.queue()。.queue()方法将css方法跟随动画方法之后。如果还需继续调用动画方法，使用.dequeue()方法。

$(".xzavier").slideUp();
$(".xzavier").slideDown();
$(".xzavier").queue(function () {
    $(this).css("background", "#ccc");
    $(this).dequeue();
})
$(".xzavier").hide("slow");

停止正在运行中的动画：.stop()方法。可选参数：clearQueue, gotoEnd。clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。

$(".stop").click(function () {
    $(".xzavier").stop(true ,true);
});

延迟执行动画：.delay()方法。可以在动画之前设置延迟，也可以在列队动画设置。

$(".animate").click(function () {
    $(".xzavier").delay(1000).animate({
        "opacity" : 0.3
    }, 1000);
    $(".xzavier").delay(1000).animate({
        "width" : "800px"
    }, 1000);
    $(".xzavier").animate({
        "height" : "400px"
    }, 1000);
});

周末好天气，打篮球去咯。代码，篮球，生活...