220718_dockMenu data json ver.

 

<problem>

기존에 html상에 존재하던 개별 li를 targeting했던 것을

>> data 파일로 뿌려 만들면서, dockMenuList("#dockMenu ul li")로 접근할 수 없어 애니메이션 효과가 작동하지 않음.

 

 

 

 

<solve point>

• ul > li 이벤트 위임
• 먼저 함수 한 번 호출하기 (target 대상이 존재하지 않는 상태에서 효과를 적용시킬 수 없다!)

 

 

<process>

 

 

1. 데이터 뿌리기

 

const dockMenu = $("#dockMenu ul");
$.ajax({ url: "data/stack.json" }).done(function (response) {
        console.log(response);
        const stacks = response.stacks;
        let tempHtml = "";
        $.each(stacks, function (idx, item) {
          tempHtml += `<li data-txt=${item.title} data-percent=${item.num} data-bg=${item.bg}>
            <a href=""><span>${item.title}</span></a>
          </li>
          `;
        });
        console.log(tempHtml);
        dockMenu.html(tempHtml);
      });

 

 

 

2. li 들이 아래로 떨어지는 firstMotion 효과 주기

    1) 데이터 뿌려주기를 함수로 묶기 ; makedockMenu() > 먼저 한 번 호출

    2) firstMotion 애니메이션 > 함수로 묶기 ; firstMotion()

    3) makedockMenu() 안에 firstMotion() 넣기

 

const dockMenu = $("#dockMenu ul");
function makeDockMenu() {
      $.ajax({ url: "data/stack.json" }).done(function (response) {
        ...
        console.log(tempHtml);
        dockMenu.html(tempHtml);
        firstMotion();
      });
    }
...
 makeDockMenu();
    function firstMotion() {
      gsap.from($("#dockMenu ul li"), {
        y: -300,
        opacity: 0,
        duration: 1.5,
        ease: "bounce",
        stagger: { each: 0.1 },
      });
    }

dockMenu.on("mouseenter", "li", function () {
        ...
      });
dockMenu.on("mouseleave", "li", function () {
        ...
      });
dockMenu.on("click", "li", function () {
      ...
    });

function firstMotion() {
      gsap.from($("#dockMenu ul li"), {
        ...
        onComplete: function () {
          // console.log("모션이 끝났습니다.");
          secondMotion();
        },
      });
    }
 
...
 
function secondMotion() {
      dockMenu.on("mouseenter", "li", function () {
        ...
      });
      dockMenu.on("mouseleave", "li", function () {
        ...
      });
    }