JQury动画

一、显示与隐藏动画

  1. show()和hide()
    show()方法用于显示页面中的元素,show()方法会改变当前元素的高度、宽度和不透明度,最终显示当前元素,当前的css属性display会恢复除none之外的初始值。
    hide()方法用于隐藏页面中的元素,hide()方法会改变当前元素的高度、宽度和不透明度,最终隐藏当前元素,当前的css属性display修改为none。
    show()语法结构:
jQuery对象.show(duration,[fn]);

注:参数duration表示动画效果运行的时间,可以使用关键字slow、normal和fast,分别对应时间0.6秒、0.4秒和0.2秒,此参数要加引号,也可以使用数字,单位默认是毫秒。
hide()语法结构:

jQuery对象.hide (duration,[fn]);
  1. toggle()方法
    作用:模拟鼠标的连续单击事件,还可以动态地改变当前元素的高度、宽度和不透明度,最终切换当前元素的可见状态。如果元素是可见的,则被切换为隐藏状态,如果元素是隐藏的,则被切换为可见的。
    语法结构:
jQuery对象.toggle(duration,[fn]);

二、 淡入与淡出动画

1.fadeIn()和fadeOut()方法
作用:fadeIn()方法动态的改变当前的元素的的透明度(其他不变),实现淡入的效果,最终显示当前元素,当前的css属性display会恢复除none之外的初始值。
格式如下:

jQuery对象.fadeIn(duration,[fn]);

fadeOut()方法动态改变当前的元素的的透明度(其他不变),实现淡出的效果,最终隐藏当前元素,当前的css属性display修改为none。
格式如下:

jQuery对象.fadeOut(duration,[fn]);
  1. fadeToggle()方法
    作用:fadeToggle()方法会动态改变当前元素的透明度,最终切换当前元素的可见状态。如果元素是可见的,则通过淡出效果切换为隐藏状态,如果元素是隐藏的,则通过淡入效果切换为可见状态。
    语法结构:
jQuery对象.fadeToggle(duration,[fn]);

注:当不设置参数时,参数默认是normal,效果是使元素在0.4秒内发生淡入与淡出的效果

3.fadeTo()方法
作用:指定元素的透明度是某一个值。
语法结构:

jQuery对象.fadeTo(duration,opacity,[fn]);

注:参数duration是动画效果的速度,参数opacity用于指定不透明度,取值范围是0~1,0表示完全透明,1表示完全不透明。

三、滑入与滑出效果

1.slideDown()方法和slideUp()方法
slideDown()会动态的改变当前元素的高度(其他不变),由上倒下滑入,即高度向下增大,直至最终显示当前元素,此时元素的css属性display恢复为除none之外的初始值。
语法格式:

jQuery对象.slideDown(duration,[fn]);

slideUp()会动态的改变当前元素的高度(其他不变),由下倒上滑出,即高度向下减小,直至最终隐藏当前元素,此时元素的css属性display修改为none。
语法格式:

jQuery对象.slideUp(duration,[fn]);
  1. slideToggle()方法
    作用:slideToggle()方法会动态改变当前元素的高度(其他不变),最终切换当前元素的可见状态。如果元素是可见的,则通过滑出效果切换为隐藏状态,如果元素是隐藏的,则通过滑入效果切换为可见状态。
    语法结构:
jQuery对象.slideToggle(duration,[fn]);

四、自定义动画

  1. 简单的动画
    animate()方法可以动态的改变当前元素的各种css属性。语法结构:
jQuery对象.animate(properties,[duration],[fn]);

注:参数properties使用一个“名:值”形式对象,用于设置需要改变的css属性。animate()方法只能改变可以取数字值的css属性。
2.移动位置的动画
animate()方法可以增加元素的长度和宽度,还可以改变元素在页面中的位置。
注意: 如要实现元素以动画效果移动,该元素的“position” 属性必须设为“relative”或“absolute”。
3.队列中的动画
多个animate()方法在元素中执行。根据这些方法执行的先后顺序,形成动画“队列”。

五、 停止动画

语法结构;

jQuery对象.stop([clearQueue][,gotoEnd]);

注:shop()方法的两个参数均为可选参数,且均为布尔类型。如果没有参数,则会立即停止当前正在执行的动画。clearQueue参数表示是否清空未执行完的动画队列,gotoEnd参数表示是否立即完成正在执行的动画。

你可能感兴趣的:(JQury动画)