Jquery如何批量给不同的p标签设置不同的动画效果?

发布于 2022-09-05 09:48:40 字数 949 浏览 21 评论 0

我想要的实现是,每个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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

双马尾 2022-09-12 09:48:40
<script type="text/javascript">
    fn($('p'))
    function fn(el) {
        $.each(el, function (i, n) {
            $(n).animate({
                "width": $(n).html()
            }, 2000, function () {
                if (i === el.length - 1) {
                    alert('ok');
                }
            })
        })
    }
</script>
请爱~陌生人 2022-09-12 09:48:40

是所有动画结束, 而不是最后一个p的动画结束。所以我判断的是动画完成的数目是否等于标签总数。。

var n = 0;
$("p").each(function(i,ele){
    $(ele).animate({"width":$(ele).html()},2000,function(){
        n++; //运动完毕,计数加一。
        if(n == $("p").length){
            alert("加载完毕!")
        }
    })
})
不乱于心 2022-09-12 09:48:40
<script>
    $(function(){
        !function(e){
            $.each(e,function(index,item){
                $(item).animate({
                    "width": $(this).html()
                },2000,function(){
                    if(index === e.length-1){
                        alert("执行完毕!")
                    }
                })
            })
        }($("p"));
    });
</script>
输什么也不输骨气 2022-09-12 09:48:40

我综合了一下大家写的,觉得 @小云吃饭小鬼吃屎 的思路写的较为简洁,然后去掉全局变量n,结合其他人写的判断条件,最终我的代码如下:

<!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").each(function(index,ele){
            $(ele).animate({"width":$(ele).html()},2000,function(){
                if(index == $("p").length - 1){
                    alert("加载完成!")
                }
            })
        })
    </script>
</body>
</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文