jquery animate() method is not smooth
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. 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. What should I do to make the animation smooth?
1 answers
solution1
-1 2020-01-26 08:44:33
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' .
NOTE:
in animate.css you SHOULD NOT use "" or '' in attribute name and just use this in values.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.