animate动画回调函数

最新推荐文章于 2024-10-18 12:33:41 发布

weixin_33709590

最新推荐文章于 2024-10-18 12:33:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Model-Zachary/p/6297297.html

本文介绍了一个使用jQuery实现的CSS动画队列示例。通过将不同的动画效果依次执行，并在前一个动画完成后触发下一个动画，实现了动画的有序执行。此外，还展示了如何在动画结束时更改元素的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对非动画的实现排队，比如这个css（）是要放在回调函数里才能，让前面的动画执行完成后在进行实现

 $('button').click(function(event) {
            $(this).next().animate({'left':'300px','height':'100px'},3000)
                          .animate({'top':'200px','width':'100px'},3000,function(){
                            $(this).css('background','red');
                          })
        });
        // $('button').trigger('click');  自动执行函数

html

    <button>点击执行</button>
        <div>
            动画排队
        </div>

css

*{margin: 0; padding: 0;list-style: none;}   
div{width: 300px;height: 200px;background-color:pink;margin:20px;text-align: center;line-height: 200px;position:absolute;}
button{margin:50px;}

转载于:https://www.cnblogs.com/Model-Zachary/p/6297297.html