jquery animate() 方法不流暢

Question

 $(document).ready(function() { $(".first").hover(function() { $(this).animate({ 'font-size': '20px', 'margin-top': '12px', 'font-weight': '600' }, 500) }) })

 .first { font-size: 16px; margin-top: 10px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <p class="first">Hello</p> </body> </html>

我嘗試使用 jquery animate() 方法為文本設置動畫。 但是動畫並不流暢。 我試圖延遲動畫並在css中使用transition屬性，但結果是一樣的。 我應該怎么做才能使動畫流暢？

Answer 1

當您想使用animate.css您應該以正確的方式使用屬性，例如在CSS margin-top: 20px is working 但在css.animate 中它不起作用，您應該像這樣寫marginTop: '20px' 。

筆記：
在 animate.css 中，您不應在屬性名稱中使用 "" 或 ''，而應在值中使用它。

所以你應該使用這個：

$(document).ready(function() {
  $(".first").hover(function() {
    $(this).animate({
      fontSize: '20px',
      marginTop: '12px',
      fontWeight: '600'
    }, 500)
  })
})

這是你的代碼工作。 JSfiddle

jquery animate() 方法不流暢

問題描述

1 個解決方案

解決方案1
-1 2020-01-26 08:44:33

jquery animate() 方法不流暢

問題描述

1 個解決方案

解決方案1 -1 2020-01-26 08:44:33

解決方案1
-1 2020-01-26 08:44:33