Jquery如何批量给不同的p标签设置不同的动画效果?
我想要的实现是,每个p标签的宽度通过2s的动画分别变为它们各自的innerHTML
值,等动画完全结束后弹出一次“加载完毕”而不是五次。我尝试过把$(this).html()
写到animate函数的第一个参数中,结果识别不出来。
我目前的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>100</p>
<p>200</p>
<p>300</p>
<p>400</p>
<p>500</p>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$("p").animate({"width":500},2000,function(){
// alert($(this).html());
alert("加载完毕!")
})
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
是所有动画结束, 而不是最后一个p的动画结束。所以我判断的是动画完成的数目是否等于标签总数。。
我综合了一下大家写的,觉得 @小云吃饭小鬼吃屎 的思路写的较为简洁,然后去掉全局变量n,结合其他人写的判断条件,最终我的代码如下: