[英]jquery animate() method is not smooth
$(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属性,但结果是一样的。 我应该怎么做才能使动画流畅?
当您想使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.