<style>
.box1{
width: 200px;
height: 200px;
background: deeppink;
}
.box2{
width: 200px;
height: 200px;
background: chartreuse;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<script src="js/js/jquery-1.12.4.min.js"></script>
<script src="js/js/jquery.easing.1.3.js"></script>
<script >
$('.box1').on('mouseover',function(){
$(this).animate({width:400,height:400},'slow','easeInOutBack',function()
{
console.log('我是回调函数');
});
});
$('.box2').on('mouseover',function(){
$(this).animate({left:500},'slow',function(){
$(this).animate({top:500},'slow',function(){
$(this).animate({left:0},20000,function(){
$(this).animate({top:0},'slow');
});
});
});
});
</script>
这篇博客介绍了如何使用jQuery的animate方法创建自定义动画效果。通过示例展示了当鼠标悬停在两个不同元素上时，如何改变元素的宽高、位置，并运用缓动函数和回调函数实现复杂的动画序列。
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
