第5课:JQuery特效

我们用jquery除了刚需之外,还有一个原因就是它可以实现很多用户体验很好的特效,让你的项目变得缤纷多彩

最简单的特效莫过于显示与隐藏了
显示用.show()
隐藏用.hide()

还有一个叫toggle的,可以进行显示隐藏的切换,无需分别调用hide show
用法:
$("button").click(function(){
    $("#godeye").toggle();
});

有了显示与隐藏,有些可能觉得效果还不是很好,就推出了淡出淡出效果
fadeIn()
用法:$(元素).fadeIn(speed,callback);可选的speed参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒
fadeOut()
fadeToggle()

滑动效果
slideDown()
slideUp()
slideToggle()

创建自定义动画效果
$(元素).animate({params},speed,callback);
实例:
把<div>元素移动到右边,直到left属性等于10 像素为止:
$("button").click(function(){
    $("div").animate({left:'10px'});
}); 

jQuery stop()方法用于在动画或效果完成前对它们进行停止

Chaining允许在相同的元素上一条语句中允许多个jQuery方法
举例:
下面的例子把 css(), slideUp(), and slideDown()链接在一起。"godeye"元素首先会变为红色,然后向上滑动,然后向下滑动:
$("#godeye").css("color","red").slideUp(2000).slideDown(2000);

最后,给出一个类似新浪微博输入框,不输入内容,点击发布时的闪烁特效
file.error = function(obj) {
    var oTimer = null;
    var i = 0;
    oTimer = setInterval(function() {
        i++;
        i == 5 ? clearInterval(oTimer) : (i % 2 == 0 ? obj.css("background-color", "#ffffff") : obj.css("background-color", "#ffd4d4"));
    }, 200);
}