Adob​​e Edge - Growing Circle Animation

Question

我正在Adobe Edge中製作產品網站。我有一個需要在一段時間內增長的圓形div，比如說，當鼠標懸停時2秒。然後文本必須出現在其中。當鼠標移出時，文字必須消失，並將相反的動畫恢復到正常大小。圈子也從中心發展，而不是左上角。我一直試圖用jQuery和css3動畫做幾個小時，但沒有得到滿意的結果。

Answer 1

這對於邊緣動畫非常簡單。

1. 使您的圈子元素。
2. 在時間軸上的00:00設置關鍵幀的圓寬和高度。
3. 按下Q（變換工具）或選擇屏幕左上角的圖標，位於箭頭的右側。
4. 變換工具基於原點縮放事物，原點可重定位但自動位於所選對象的中心。
5. 到時間線上的02:00。
6. 調整您的圈子大小。
7. 在0不透明度處爲您的文本設置關鍵幀。
8. 在時間軸上前進。
9. 以100％不透明度爲您的文本設置另一個關鍵幀。
10. 將圓圈和文本分組爲一個div。
11. 右鍵單擊該div並按'轉換爲符號'。
12. 點擊預覽窗口左上角的'舞臺'返回舞臺。
13. 選擇要用於觸發動畫的對象。
14. 打開該對象的操作。
15. 將以下代碼粘貼到一個mouseover事件中：var mySymbolObject = sym.getSymbol（「插入符號的名稱」）。
16. 現在發出mouseout事件並粘貼以下代碼：var mySymbolObject = sym.getSymbol（「插入符號的名稱」）。playReverse（）;

現在應該發生的是onMouseOver，該符號的時間軸向前播放，onMouseOut則該符號的時間軸反向播放。這樣，如果動畫是一半通過並且它們被移出，它將從其返回到開始的位置反轉。

Answer 2

也許你也想使用mouseenter/mouseleave事件而不是mouseover/mouseout，如果你將文本div嵌套在div div內。

http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html