## jQuery动画 ##### 显示和隐藏 ```javascript $("img").hide(); // $("img").css("display" , "none"); $("img").show(); // $("img"). css("display" , "block"); $().hide(speed,callback) $(),show(speed,callback) $().toggle() //简单的toggle() 切换”元素的“显示状态” $().toggle(speed , callback); //动画的toggle() ``` ##### 淡入和淡出 ```javascript show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏； fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏 $().fadeIn(speed , callback) $().fadeOut(speed , callback) $("#img1").toggle(500); // 通过opacity来实现动画的显示与隐藏 $().fadeTo(speed , opacity , callback) $("img").hover(function () { $(this).fadeTo(200, 0.8);}, function () { $(this).fadeTo(200, 1.0); }) ``` ##### 滑上和滑下 ```javascript $().slideDown(speed , callback) $().slideUp(speed , callback) ---------------------------------------------- var flag = 0; $("h3").click(function () { if (flag == 0) { $("p").slideDown(); flag = 1; }else{ $("p").slideUp(); flag = 0; } }); slideToggle(speed , callback) ``` ##### 自定义动画 ```javascript jquery.color.js这个文件解决animate()方法无法识别color和background-color、border-color等颜色属性值的问题。 由于jquery.color.js是依赖jQuery库而存在的， 因此jquery.color.js文件必须放在jquery.1.12.0.min.js（jQuery库文件）后面引入，不然同样无效 $("#lvye").click(function () { $(this).animate({ "width": "100px","height":"100px","background-color":"red"}, 1000); }) 累积动画 animate({ "width": "+=100px", "height": "+=100px" } 回调函数 $(this).animate({ "width": "100px"}, 1000).css("border", "5px solid red"); // css()方法并不会加入到“动画队列”中，而是立即执行 $(this).animate({ "width": "100px", }, 1000, function () { $(this).css("border", "5px solid red"); ``` ##### 队列动画 ```javascript $().animate().animte()…….animte() $(this).animate({ "width": "100px", "height": "100px" }, 1000) .animate({ "background-color": "red" }, 1000) .fadeOut(500); ``` 动画的停止和延迟 ```javascript stop() 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行 stop(true) 等价于stop(true,false)，停止所有动画，包括当前执行的动画 $().stop(clearQueue,gotoEnd) 参数clearQueue表示是否要清空“未执行”的“动画队列” 参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态 $().delay(speed) $(this).animate({ "width": "200px" }, 1000) .delay(1000) .animate({ "height": "200px" }, 1000); ``` ```javascript （1）显示和隐藏：通过改变width、height、opacity、display来实现动画的显示和隐藏； （2）淡入和淡出：通过改变opacity、display来实现动画的淡入和淡出； （3）滑上和滑下：通过改变height、display来实现动画的滑上和滑下； ``` 判断动画状态 ```javascript if(!$().is(":animated")){ //如果当前没有进行动画，则添加新动画} $("#wrapper").hover(function () { if(!$(" #content", this).is(":animated")){ $(" #content", this).animate({ "bottom": "0px" }, 200); }}, function () { if(!$(" #content", this).is(":animated")) { $(" #content", this).animate({ "bottom": "-28px" }, 200); }}) ```