【发布时间】：2013-09-17 06:28:40
【问题描述】：
我正在 Adobe Edge 中制作产品网站。我有一个圆形 div，需要在鼠标悬停时在 2 秒内增长。然后必须出现一个文本。当鼠标移出时，文本必须消失并做反向动画回到正常大小。圆圈也必须从它的中心开始，而不是从左上角开始。我用 jquery 和 css3 动画尝试了几个小时，但没有得到令人满意的结果。
【问题讨论】：
标签： animation text adobe-edge
【发布时间】：2013-09-17 06:28:40
【问题描述】：
边缘动画很容易做到这一点。
- 制作你的圆形元素。
- 在时间轴上的 00:00 处为圆圈的宽度和高度设置一个关键帧。
- 按 Q（变换工具）或选择屏幕左上角箭头右侧的图标。
- 变换工具根据原点缩放物体，原点可重新定位，但会自动位于所选对象的中心。
- 转到时间轴上的 02:00。
- 调整您的圈子大小。
- 将文本的关键帧设置为 0 不透明度。
- 按时间线前进。
- 为您的文本设置另一个 100% 不透明度的关键帧。
- 将圆圈和文本分组到一个 div 中。
- 右键单击该 div 并按“转换为符号”。
- 点击预览窗口左上角的“舞台”返回舞台。
- 选择要用于触发动画的对象。
- 打开该对象的操作。
- 将以下代码粘贴到鼠标悬停事件中：var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
- 现在创建一个 mouseout 事件并粘贴以下代码：var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();
现在应该发生的是 onMouseOver，该符号的时间线正向播放，onMouseOut，该符号的时间线反向播放。这样，如果动画进行到一半并且鼠标移开，它就会从原来的位置反转到开始处。
【讨论】：
如果您将文本 div 嵌套在圆形 div 内，您可能还想使用 mouseenter/mouseleave 事件而不是 mouseover/mouseout。
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html
【讨论】：