隐藏/显示

过渡效果是通过控制宽高的方式

  • show() - 显示隐藏的被选元素（适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素，不适用于通过 visibility:hidden 隐藏的元素）
  • hide() - 隐藏被选元素（display: none）
  • toggle() - 在被选元素上进行 hide() 和 show() 之间的切换

参 数
**

  • speed 规定显示效果的速度
  • easing 规定在动画的不同点上元素的速度
  • callback 函数执行完之后要执行的函数

滑入/滑出

过渡效果是通过控制高度的方式

  • slideDown() - 以滑动方式显示被选元素（适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素，不适用于通过 visibility:hidden 隐藏的元素）
  • slideUp() - 以滑动方式显示被选元素（display: none）
  • slideToggle() - 在被选元素上进行 slideDown() 和 slideUp() 之间的切换

参 数
**

  • speed 规定显示效果的速度
  • easing 规定在动画的不同点上元素的速度
  • callback 函数执行完之后要执行的函数

淡入/淡出

过渡效果是通过控制 opacity 的方式

  • fadeIn() - 逐渐改变被选元素的不透明度，从隐藏到可见（适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素，不适用于通过 visibility:hidden 隐藏的元素）
  • fadeOut() - 逐渐改变被选元素的不透明度，从可见到隐藏（dispaly: none）
  • fadeToggle() -在被选元素上进行 fadeIn() 和 fadeOut() 之间的切换

  • fadeTo() - 逐渐改变被选元素的不透明度为指定的值

    参 数
    **

  • speed 规定显示效果的速度

  • opacity 规定要淡入或淡出的透明度，介于 0.00 与 1.00 之间的数字
  • easing 规定在动画的不同点上元素的速度
  • callback 函数执行完之后要执行的函数

动画

animate()

animate() 对被选元素应用”自定义”的动画

该方法通过 CSS 样式将元素从一个状态改变为另一个状态，CSS属性值是逐渐改变的，这样就可以创建动画效果

只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）

创建多个动画时使用对象的方式

参 数

  • style 规定产生动画效果的一个或多个 CSS 属性/值（必须驼峰命名法）
  • speed 规定动画的速度
  • easing 规定在动画的不同点中元素的速度
  • callback 函数执行完之后要执行的函数
  1. $(document).ready(function(){
  2.     $("#btn1").click(function(){
  3.         $("#box").animate({
  4.         height: "300px",
  5.       width: "300px"
  6.     }, 2000);
  7.     });
  8. });

stop()

stop() 停止被选元素上当前正在运行的动画

当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。

参 数

  • stopAll 布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false
  • goToEnd 布尔值，规定是否立即完成当前的动画。默认是 false
$(document).ready(function(){
    $("#start").click(function(){
        $("div").animate({height:300},3000);
        $("div").animate({width:300},3000);
    });
    $("#stop").click(function(){
        $("div").stop(true, true);
    });
});