限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 动画效果

jquery盆栽绿植生长动画特效

所属分类： 网页特效-动画效果    2024-12-05 01:06:35

 9.1K  0  查看评论 (0)
jquery盆栽绿植生长动画特效 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery盆栽绿植生长动画特效（共3个文件）

    • index.html

使用方法

  • code
  • source
  1. $("#new-todo").keypress(function (event) {

  2.     var keycode = event.keyCode ? event.keyCode : event.which;

  3.     if (keycode == "13") {

  4.         console.log("pressed");

  5. 

  6.         if ($(this).val().length !== 0) {

  7.             var toDoCount = $("span.box").length + 1;

  8. 

  9.             $("#todos").prepend(

  10.                 '

  11. <li>

  12.     <input id="checkbox-' + toDoCount + '" type="checkbox"><label for="checkbox-' + toDoCount + '">' +

  13.                     $(this).val() +

  14.                     '<span class="box"></span></label>

  15. </li>

  16. '

  17.             );

  18.             $(this).val("");

  19.         }

  20.     }

  21. });

  22. 

  23. function growPlant() {

  24.     var stage = $("svg").data("stage");

  25.     if (stage < 11) { playTimeline(stage); $("aside p").text(changeMotivation(stage)); $("svg").data("stage", stage + 1); } } function changeMotivation(number) { switch (number) { case 1: return "赶快去行动吧！"; break; case 2: return "继续保持、继续努力！"; break; case 3: return "只有坚持才能进步"; break; case 4: return "非常好，继续保持，最后才能胜利"; break; case 5: return "你明白了！"; break; case 6: return "迎接挑战是你的座右铭"; break; case 7: return "再来一个！"; break; case 8: return "你快到了。。。"; break; case 9: return "还有一个好措施。"; break; case 10: return "顶呱呱~"; break; } } $("#todos").on("click", "label", function () { $(this).closest("li").toggleClass("done"); if ($(this).closest("li").hasClass("done")) { growPlant(); } }); gsap.registerPlugin(EasePack); const tl = gsap.timeline(); var master = new TimelineMax(); $(function () { tl.fromTo(".soil", { scale: 0 }, { duration: 0.4, scale: 1 }); growPlant(); }); function playTimeline(item) { tl.to("svg", { duration: 0.3, opacity: 1, ease: Quad.easeInOut }, "grow-1"); tl.fromTo( ".grow-1 > g",

  26.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  27.         { duration: 0.35, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  28.         "grow-2"

  29.     );

  30.     tl.fromTo(

  31.         "#cactus-bulb-1",

  32.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  33.         { duration: 0.55, scale: 0.3, opacity: 1, ease: Quad.easeInOut },

  34.         "grow-2"

  35.     );

  36. 

  37.     tl.fromTo(

  38.         ".grow-2 > g",

  39.         { scale: 0, opacity: 0, transformOrigin: "top center" },

  40.         { duration: 0.44, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  41.         "grow-3"

  42.     );

  43.     tl.to(

  44.         "#cactus-bulb-1",

  45.         { duration: 0.4, scale: 0.6, opacity: 1, ease: Quad.easeInOut },

  46.         "grow-3"

  47.     );

  48. 

  49.     tl.fromTo(

  50.         ".grow-3 > g",

  51.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  52.         { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  53.         "grow-4"

  54.     );

  55.     tl.to(

  56.         "#cactus-bulb-1",

  57.         { duration: 0.3, scale: 1, opacity: 1, ease: Quad.easeInOut },

  58.         "grow-4"

  59.     );

  60. 

  61.     tl.fromTo(

  62.         ".grow-4 > g",

  63.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  64.         { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  65.         "grow-5"

  66.     );

  67.     tl.fromTo(

  68.         "#long-cactus-1",

  69.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  70.         { duration: 0.4, scale: 0.3, opacity: 1, ease: Quad.easeInOut },

  71.         "grow-5"

  72.     );

  73. 

  74.     tl.to(

  75.         "#long-cactus-1",

  76.         { duration: 0.5, scale: 0.6, opacity: 1, ease: Quad.easeInOut },

  77.         "grow-6"

  78.     );

  79.     tl.fromTo(

  80.         ".grow-5 > g",

  81.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  82.         { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  83.         "grow-6"

  84.     );

  85. 

  86.     tl.to(

  87.         "#long-cactus-1",

  88.         { duration: 0.45, scale: 1, opacity: 1, ease: Quad.easeInOut },

  89.         "grow-7"

  90.     );

  91.     tl.fromTo(

  92.         ".grow-6 > g",

  93.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  94.         { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  95.         "grow-7"

  96.     );

  97.     tl.fromTo(

  98.         "#cactus-bulb-2",

  99.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  100.         { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  101.         "grow-7"

  102.     );

  103. 

  104.     tl.fromTo(

  105.         ".grow-7 > g",

  106.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  107.         { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  108.         "grow-8"

  109.     );

  110.     tl.fromTo(

  111.         "#long-cactus-2",

  112.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  113.         { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  114.         "grow-8"

  115.     );

  116. 

  117.     tl.fromTo(

  118.         "#long-cactus-3",

  119.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  120.         { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  121.         "grow-9"

  122.     );

  123.     tl.fromTo(

  124.         "#cactus-bulb-3",

  125.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  126.         { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  127.         "grow-9"

  128.     );

  129. 

  130.     tl.fromTo(

  131.         ".grow-8 > g",

  132.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  133.         { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  134.         "grow-10"

  135.     );

  136.     tl.fromTo(

  137.         "#long-cactus-4",

  138.         { scale: 0, opacity: 0, transformOrigin: "bottom center" },

  139.         { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },

  140.         "grow-10"

  141.     );

  142. 

  143.     tl.tweenFromTo("grow-" + item, "grow-" + (item + 1));

  144. }

$("#new-todo").keypress(function (event) {
    var keycode = event.keyCode ? event.keyCode : event.which;
    if (keycode == "13") {
        console.log("pressed");

        if ($(this).val().length !== 0) {
            var toDoCount = $("span.box").length + 1;

            $("#todos").prepend(
                '
<li>
    <input id="checkbox-' + toDoCount + '" type="checkbox"><label for="checkbox-' + toDoCount + '">' +
                    $(this).val() +
                    '<span class="box"></span></label>
</li>
'
            );
            $(this).val("");
        }
    }
});

function growPlant() {
    var stage = $("svg").data("stage");
    if (stage < 11) { playTimeline(stage); $("aside p").text(changeMotivation(stage)); $("svg").data("stage", stage + 1); } } function changeMotivation(number) { switch (number) { case 1: return "赶快去行动吧！"; break; case 2: return "继续保持、继续努力！"; break; case 3: return "只有坚持才能进步"; break; case 4: return "非常好，继续保持，最后才能胜利"; break; case 5: return "你明白了！"; break; case 6: return "迎接挑战是你的座右铭"; break; case 7: return "再来一个！"; break; case 8: return "你快到了。。。"; break; case 9: return "还有一个好措施。"; break; case 10: return "顶呱呱~"; break; } } $("#todos").on("click", "label", function () { $(this).closest("li").toggleClass("done"); if ($(this).closest("li").hasClass("done")) { growPlant(); } }); gsap.registerPlugin(EasePack); const tl = gsap.timeline(); var master = new TimelineMax(); $(function () { tl.fromTo(".soil", { scale: 0 }, { duration: 0.4, scale: 1 }); growPlant(); }); function playTimeline(item) { tl.to("svg", { duration: 0.3, opacity: 1, ease: Quad.easeInOut }, "grow-1"); tl.fromTo( ".grow-1 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.35, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-2"
    );
    tl.fromTo(
        "#cactus-bulb-1",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.55, scale: 0.3, opacity: 1, ease: Quad.easeInOut },
        "grow-2"
    );

    tl.fromTo(
        ".grow-2 > g",
        { scale: 0, opacity: 0, transformOrigin: "top center" },
        { duration: 0.44, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-3"
    );
    tl.to(
        "#cactus-bulb-1",
        { duration: 0.4, scale: 0.6, opacity: 1, ease: Quad.easeInOut },
        "grow-3"
    );

    tl.fromTo(
        ".grow-3 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-4"
    );
    tl.to(
        "#cactus-bulb-1",
        { duration: 0.3, scale: 1, opacity: 1, ease: Quad.easeInOut },
        "grow-4"
    );

    tl.fromTo(
        ".grow-4 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-5"
    );
    tl.fromTo(
        "#long-cactus-1",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 0.3, opacity: 1, ease: Quad.easeInOut },
        "grow-5"
    );

    tl.to(
        "#long-cactus-1",
        { duration: 0.5, scale: 0.6, opacity: 1, ease: Quad.easeInOut },
        "grow-6"
    );
    tl.fromTo(
        ".grow-5 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-6"
    );

    tl.to(
        "#long-cactus-1",
        { duration: 0.45, scale: 1, opacity: 1, ease: Quad.easeInOut },
        "grow-7"
    );
    tl.fromTo(
        ".grow-6 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-7"
    );
    tl.fromTo(
        "#cactus-bulb-2",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-7"
    );

    tl.fromTo(
        ".grow-7 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-8"
    );
    tl.fromTo(
        "#long-cactus-2",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-8"
    );

    tl.fromTo(
        "#long-cactus-3",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.3, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-9"
    );
    tl.fromTo(
        "#cactus-bulb-3",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.4, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-9"
    );

    tl.fromTo(
        ".grow-8 > g",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-10"
    );
    tl.fromTo(
        "#long-cactus-4",
        { scale: 0, opacity: 0, transformOrigin: "bottom center" },
        { duration: 0.5, scale: 1, opacity: 1, stagger: 0.04, ease: Quad.easeInOut },
        "grow-10"
    );

    tl.tweenFromTo("grow-" + item, "grow-" + (item + 1));
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： css3动画svg动画动画特效待办事项
相关资源 / 动画效果
查看更多

jquery个人简介转换成漂亮的动画卡片特效代码

 一款个人简介信息转换卡片式特效插件，默认展示大头像和姓名，点击按钮可动画切换到更详细的简介说明，带平滑的动画特效。
  动画效果
 9322  0

jquery单页自定义全屏滚动页面插件

 Scrollify是一个页面滚动插件，可提醒用户使用鼠标滚轮或拉动滚动条，进行滚动页面。
  动画效果
 6327  0

CSS鼠标悬停触发3D立方体旋转动画特效代码

 一款鼠标悬停旋转滚动特效，自动根据鼠标悬停时进入的方位进行滚动旋转，可设置点击链接。
  动画效果
 1453  0

CSS摆动的灯笼动画特效

 一款纯css代码绘制的灯笼动画效果，逼真的摆动特效，非常的有感觉！
  动画效果
 5299  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论