javascript - jquery animate() 方法不流畅
问题描述
$(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
中工作但在css.animate中它不起作用,你应该这样写marginTop: '20px'
。
注意:
在 animate.css 中,您不应该在属性名称中使用“”或“”,而只能在值中使用它。
所以你应该使用这个:
$(document).ready(function() {
$(".first").hover(function() {
$(this).animate({
fontSize: '20px',
marginTop: '12px',
fontWeight: '600'
}, 500)
})
})
这是你的代码工作。JSfiddle
推荐阅读
- arrays - 循环遍历数组并一次显示单个项目,动态持续时间,如 react js 中的 setTimeout 或 SetInterval
- angular - 我想把一个角度量规图表放在一个角度。但是有一个错误。有解决办法吗?
- reactjs - 如何在 useEffect 中使用新状态,但仅在卸载时执行清理
- javascript - 下面的代码将向控制台输出什么,为什么?
- r - 了解 scale_gradient 缩放
- sql - SQL 日期问题 - 统计过去 6 个中至少 2 个月内至少下过 1 个订单的用户
- git - 为什么git会自动忽略我项目中名为“security”的包?
- openssl - 如何在 iOS 应用程序可以接受的 wso2 身份服务器中配置自签名证书
- javascript - 如何在 html textarea 中创建“阅读更多”?我的 .js 文件中已经有 javascript 函数,成功地在 jqgrid 中调用“查看更多”
- python - seq2seq 模型中的双向 LSTM