动画插件
jQuery 不能给元素颜色样式添加动画，动画的速率曲线也只有两种，如果我们想要更改元素的颜色，或者添加更多样的运动轨迹效果，需要借助插件实现。
常见的两个插件为：jquery.color.js 和 jquery.easing.js。前者为 jQ 添加颜色动画，后者扩展了时序函数。
注意：插件的使用依赖于 jQuery，因此引入插件要在引入 jQuery 文件之后。
例如：
<style>
.box{
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #f00;
}
</style>
<body>
<div class="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script>
var $box = $(".box");
$box.click(function (){
// 样式值可以带单位，也可以不带单位
$(this).animate({
top: "150px",
left: 150,
width: 300,
height: 300,
opacity: .2,
backgroundColor: "#00f"
}, 2000, "easeInOutBack", function(){
console.log("动画执行完成");
})
})
</script>
</body>
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
