## jQuery动画 ### 1. show() 方法和 hide() 方法 * 调用`hide()`方法会将元素的display样式改为' none '。 * `show()方法`将元素的display样式设置为先前的显示状态。 * `show()`方法和`hide()`方法的参数可以指定毫秒值，缓慢的隐藏和展示。 ```javascript $('p').toggle(function(){ $(this).hide(2000); },function(){ $(this).show(2000); }) ``` ### 2.fadeIn()和fadeOut()方法 fadeIn()和fadeOut()方法只改变元素的不透明度。 fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。 ~~~javascript $('p').toggle(function(){ $(this).fadeOut(); },function(){ $(this).fadeIn(); }) ~~~ ### 3.slideUp()方法和slideDown()方法 slideUp()方法和slideDown()方法只会改变元素的高度。 如果一个元素的 display 属性值为'none',调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。 ~~~javascript $('p').toggle(function(){ $(this).slideUp(); },function(){ $(this).slideDown(); }) ~~~ > jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。 ### 4.animate()方法 可以使用animate()方法来自定义动画。 结构：`animate(params,speed,callback)` ~~~javascript $('#panel').click(function(){ lg('click'); $(this).animate({left:'+=500px'}, 3000); }); //多重动画 $('#panel').click(function(){ lg('click'); $(this).animate({left:'+=500px',top:'+=500px'}, 30000); }); ~~~