1. 首頁
  2. 問答
  3. 如何檢查HTML元素的動畫？

如何檢查HTML元素的動畫？

2013-04-12 57 views
6

我想看看分配給特定元素的CSS過渡或JavaScript/jQuery動畫。我應該如何在Chrome DevTools或其他開發人員工具中執行此操作？如何檢查HTML元素的動畫？

例如，我訪問了一個Google plus頁面，我注意到當我將它懸停在一張圖像上時，它會變爲灰色，並且一個關閉按鈕出現在角落。

普通：

Normal state

哈弗：

Hover on state

我怎樣才能看到這種行爲背後的代碼？

來源

2013-04-12 Jonas

回答

1

他們將註冊懸停事件。懸停事件可通過各種方法

  1. 在CSS

    #someId:hover 
{ 
color:red; 
}
  2. 在Jquery的

    加入。 $('#someid').hover();

  3. via Unobtrusive jquery。他們會以不顯眼的方式附加事件

現在檢查此方法的查看源。一些他們將附加事件的地方。

來源

2013-04-12 09:10:37

+0

謝謝。我知道這一點。但是有沒有方便的方法來做到這一點？我不想查看腳本和_find_元素，然後檢查相應的代碼。 – Jonas

1

對於css轉換，使用chrome開發工具時很容易發現。 只需右鍵單擊要查看的動畫，即可調出檢查員。將元素的狀態更改爲懸停，您可以查看所有懸停元素的CSS。

對於javascript，您可以使用chrome開發工具中的Resources選項卡來查看哪些腳本會觸發。只需通過它即可。

對於你的影響..它最可能的Javascript。

來源

2013-04-12 09:12:33 gvhuyssteen

+0

謝謝，但那裏有太多的腳本。我只想看到這個元素的JavaScript。 – Jonas

+0

在資源選項卡下，有一個文件夾結構。 導航「框架」下的文件夾，您將遇到「腳本」文件夾。在那裏你會找到所有的Javascript文件。 – gvhuyssteen

0

右鍵單擊元素選項卡中的html元素，然後選擇：hover options。現在您可以看到懸停CSS應用於右側樣式選項卡中的特定元素。請參閱屏幕截圖

enter image description here

來源

2016-08-23 08:11:10 suresh

相關問題

 相關問題