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>

I tried to animate a text using jquery animate() method.我尝试使用 jquery animate() 方法为文本设置动画。 But the animation is not smooth.但是动画并不流畅。 I have tried to delay the animation and also use transition attribute in css, but the result is the same.我试图延迟动画并在css中使用transition属性，但结果是一样的。 What should I do to make the animation smooth?我应该怎么做才能使动画流畅？

Answer 1

when you want to use animate.css you should use attributes in it's right way, for example in CSS margin-top: 20px is working BUT in css.animate it's not working and you should write like this marginTop: '20px' .当您想使用animate.css您应该以正确的方式使用属性，例如在CSS margin-top: 20px is working 但在css.animate 中它不起作用，您应该像这样写marginTop: '20px' 。

NOTE:笔记：
in animate.css you SHOULD NOT use "" or '' in attribute name and just use this in values.在 animate.css 中，您不应在属性名称中使用 "" 或 ''，而应在值中使用它。

so you should use this:所以你应该使用这个：

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

this this is your code working.这是你的代码工作。 JSfiddle 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