jQuery animate 动画在Storyline中的运用

一、animate()方法详解
animate()方法是jQuery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。
注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。
语法 1
$(selector).animate({styles},speed,easing,callback)
styles 必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔。常用属性height、width、font、fontSize、bottom、left、right、top
speed 可选。规定动画的速度。可能的值 毫秒 “slow” “fast”
easing 可选。规定在动画的不同点中元素的速度。默认值是 “swing”。可能的值：
“swing” – 在开头/结尾移动慢，在中间移动快
“linear” – 匀速移动
语法 2
$(selector).animate(styles,options)
styles 必需。规定产生动画效果的 CSS 样式和值（同上）。
可选。规定动画的额外选项。
可能的值：
speed – 设置动画的速度
easing – 规定要使用的 easing 函数
callback – 规定动画完成之后要执行的函数
step – 规定动画的每一步完成之后要执行的函数
queue – 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing – 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
二、应用实例
让storyline元素先向上移动62像素，再向右移动90像素。
$(“.xhz”).animate({top:”+=-62px”})//xhz是元素名称，也可以这样写：”.xhz svg”，选择当前标签下的svg标签。
$(“.xhz”).animate({left:”+=90px”})