Jquery动画

莫笑沉吟
269 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

预定义动画

显示与隐藏

show()方法和hide()方法是jQuery中最基本的动画方法。具体语法如下:

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
  • speed:三种预定速度之一的字符串(“slow”、“normal”或者“fast”)或表示动画时长的毫秒数值。
  • easing:用来指定切换效果，默认是“swing”，可用参数“linear ”。
  • fn:在动画完成时执行的函数，每个元素执行一次。

滑动式动画

slidelUp()方法和slideDown()方法通过改变高度值实现动画效果。具体语法如下:

$element.slideUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);
  • speed:三种预定速度之一的字符串(“slow”、“normal”或者“fast”)或表示动画时长的毫秒数值。
  • easing:用来指定切换效果，默认是“swing ”，可用参数“linear ”。
  • fn:在动画完成时执行的函数，每个元素执行一次。

淡入淡出效果

fadeln()方法和fadeOut()方法通过改变透明度实现动画效果。具体语法如下:

$element.fadeln([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);
  • speed:三种预定速度之一的字符串(“slow”、“normal”或者“fast”)或表示动画时长的毫秒数值。
  • easing:用来指定切换效果，默认是“swing ”，可用参数“linear ”。
  • fn:在动画完成时执行的函数，每个元素执行一次。

动画切换效果

jQuery除了提供了三种预定义动画效果之外，还提供三组动画切换效果:

  • toggle([speed][,easing][,fn])方法:如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。
  • slideToggle([speed][,easing][,fn]方法:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
  • fadeToggle[speed][,easing][,fn])方法:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

自定义动画

animate()方法

jQuery提供了anirmate()方法完成自定义动画效果，该方法具有两种用法:

$element.animate(properties,duration,easing,complete)
  • properties:一个CSS属性和值的对象,动画将根据这组对象移动。
  • duration:一个字符串或者数字决定动画将运行多久。
  • easing:一个字符串，表示过渡使用哪种缓动函数。
  • complete:在动画完成时执行的回调函数。

jQuery提供了animate()方法完成自定义动画效果，该方法具有两种用法:

$element.animate(properties.options)
  • properties: 一个CSS属性和值的对象,动画将根据这组对象移动。
  • options:一组包含动画选项的值的集合。支持的选项: duration:一个字符串或者数字决定动画将运行多久。
    • easing:一个字符串，表示过渡使用哪种缓动函数。
    • queue:一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
    • complete:在动画完成时执行的回调函数。

通过animate()方法实现动画效果，但不支持以下CSS样式属性:

  • backgroundColor
  • borderBottomnColor
  • cborderLeftColor
  • borderRightColor
  • borderTopColor
  • Color
  • outlineColor

并发与排队效果

  • 并发效果:指的就是多个动画效果同时执行。
$("#panel").click(function(){
    $(this).animate({
    	left: "500px",
    	height:"200px"
    }, 30O0);
});
  • 排队效果:指的就是多个动画按照先后顺序执行。
$("#panel").click(function(){
    $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
});

停止动画效果

jQuery提供了stop()方法用于停止所有在指定元素上正在运行的动画，具体语法如下：

$element.animate([clearQueue][, gotoEnd]);
  • clearQueue:如果设置成true，则清空队列。可以立即结束动画。
  • gotoEnd: 让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

延迟动画效果

jQuery提供了delay()方法用于设置一个延时来推迟执行队列中之后的项目，具体语法如下:

$element.delay(duration[, queueName]);
  • duration:延时时间，单位为毫秒。
  • queueName:队列名词，默认是Fx，动画队列。
avatar
文章
阅读
粉丝