클릭시 기능 실행 및 두 번째 클릭시 반전

리스

페이지가 새로 고쳐지 자마자 실행되는 순간 화면 밖에서 움직이는 텍스트가 있습니다. 햄버거 아이콘을 클릭하면 호출되는 기능이 필요합니다. 그런 다음 아이콘을 열고 다시 클릭하면 가능한 경우 첫 번째 문자 (C)가 처음으로 돌아와서 기능이 반전되기를 원합니다.

jQuery("#button").click(function() {
  jQuery(".line1").toggleClass("open1");
  jQuery(".line2").toggleClass("open2");
  jQuery(".line3").toggleClass("open3");
});

(function text_loop(i) {
  setTimeout(function() {
    if (i <= 15)
      $("#logo_text span").eq(i).addClass("slide_out");
    i++;
    text_loop(i);
  }, 100);
})(0);
#burger_container {
  background-color: #404041;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  z-index: 101;
}

svg {
  margin: 20px auto 0 auto;
  display: block;
}

#logo_text {
  transform: rotate(-90deg);
  margin-top: 350px;
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
}

#logo_text span {
  font-weight: 400;
  position: relative;
  top: 0;
  transition: top 1s ease;
}

#logo_text span.slide_out {
  top: -60px;
  transition: top 0.5s ease;
}

.line1,
.line2,
.line3 {
  transition: all 0.3s ease;
}

.open1 {
  transform-origin: top left;
  transform: translatex(3px) translatey(-1px) rotate(45deg);
  width: 33px;
}

.open2 {
  opacity: 0;
}

.open3 {
  transform-origin: bottom left;
  transform: translatex(3px) translatey(1px) rotate(-45deg);
  width: 33px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div id="burger_container">
  <div>
    <svg id="button" style="height: 26px; width: 26px;">
      <g style="" fill="#f04d43">
        <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
      </g>
    </svg>

    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
  </div>
</div>

Ewwink

그것을 함수로 호출하면 setTimeoutif 문에서 중괄호로 감싸지 않습니다.

jQuery("#button").click(function() {
  jQuery(".line1").toggleClass("open1");
  jQuery(".line2").toggleClass("open2");
  jQuery(".line3").toggleClass("open3");
  var currentClass = $("#logo_text span").eq(0).attr('class');
  if(currentClass === undefined || currentClass == "slide_in") {
    text_loop(0, 'slide_out');
  }
  else {
    text_loop(0, 'slide_in');
  }
});

function text_loop(i, classname) {
  setTimeout(function() {
    if(i <= 15) {
      $("#logo_text span").eq(i).attr('class', classname);
      i++;
      text_loop(i, classname);
    }
  }, 100);
}
#burger_container {
  background-color: #404041;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  z-index: 101;
}

svg {
  margin: 20px auto 0 auto;
  display: block;
}

#logo_text {
  transform: rotate(-90deg);
  margin-top: 350px;
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
}

#logo_text span {
  font-weight: 400;
  position: relative;
  top: 0;
  transition: top 1s ease;
}

#logo_text span.slide_out {
  top: -60px;
  transition: top 0.5s ease;
}

#logo_text span.slide_in {
  top: 0px;
  transition: top 0.5s ease;
}

.line1,
.line2,
.line3 {
  transition: all 0.3s ease;
}

.open1 {
  transform-origin: top left;
  transform: translatex(3px) translatey(-1px) rotate(45deg);
  width: 33px;
}

.open2 {
  opacity: 0;
}

.open3 {
  transform-origin: bottom left;
  transform: translatex(3px) translatey(1px) rotate(-45deg);
  width: 33px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div id="burger_container">
  <div>
    <svg id="button" style="height: 26px; width: 26px;">
      <g style="" fill="#f04d43">
        <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
      </g>
    </svg>

    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jquery에서 두 번째 클릭시 기능 실행

분류에서Dev

두 번째 클릭시 행 전환

분류에서Dev

두 번째 클릭시 기능 변경

분류에서Dev

두 번째 클릭에서 JQUERY로 다른 기능을 실행하십시오.

분류에서Dev

버튼 클릭시 두 번째 양식 숨기기 및 표시

분류에서Dev

Ajax 및 Django로 두 번째 클릭 후 Div 표시 / 숨기기

분류에서Dev

두 번째 클릭시 ajax 성공 함수 반환보기

분류에서Dev

Ajax 후 두 번째 클릭시 Jquery 클릭 이벤트 전파

분류에서Dev

첫 번째 클릭 숨기기, 두 번째 클릭 다시 표시

분류에서Dev

JQuery는 첫 번째 클릭시 실행되지 않지만 두 번째 클릭시 실행됩니다.

분류에서Dev

두 번째 클릭시 버튼 클릭이 실행되지 않음

분류에서Dev

두 번째 클릭시 jQuery가 실행되지 않음

분류에서Dev

Android-두 번째 버튼 클릭시 다음 실행

분류에서Dev

두 번째 클릭시 SVG 애니메이션 반전

분류에서Dev

두 번째 클릭시 다른 기능이있는 버튼 및 텍스트 변경

분류에서Dev

기능은 두 번째 클릭 전에 팝업을 엽니 다

분류에서Dev

두 번째 클릭 후 기능 작동

분류에서Dev

div에서 두 번째 클릭 기능?

분류에서Dev

Tkinter 첫 번째 클릭 첫 번째 기능, 두 번째 클릭 두 번째 기능

분류에서Dev

클릭 기능 내에서 클릭 및 다시 클릭 기능

분류에서Dev

두 번째 클릭시 하위 div 숨기기

분류에서Dev

LitElement 클릭 기능이 두 번 실행됩니다.

분류에서Dev

Jquery 메뉴 첫 번째 클릭하여 표시 두 번째 클릭하여 메뉴 숨기기

분류에서Dev

버튼 클릭으로 클라이언트 측 및 서버 측 기능 모두 수행-특정 시나리오

분류에서Dev

두 번째 클릭시 역순

분류에서Dev

첫 번째 모달을 숨기고 클릭 기능에 두 번째 모달 표시

분류에서Dev

첫 번째 클릭시 애니메이션 전환이 실행되지 않음

분류에서Dev

버튼 클릭시 행에서 n 번째 셀 얻기

분류에서Dev

클릭시 실행하려면 두 가지 기능이 필요합니다.

Related 관련 기사

  1. 1

    jquery에서 두 번째 클릭시 기능 실행

  2. 2

    두 번째 클릭시 행 전환

  3. 3

    두 번째 클릭시 기능 변경

  4. 4

    두 번째 클릭에서 JQUERY로 다른 기능을 실행하십시오.

  5. 5

    버튼 클릭시 두 번째 양식 숨기기 및 표시

  6. 6

    Ajax 및 Django로 두 번째 클릭 후 Div 표시 / 숨기기

  7. 7

    두 번째 클릭시 ajax 성공 함수 반환보기

  8. 8

    Ajax 후 두 번째 클릭시 Jquery 클릭 이벤트 전파

  9. 9

    첫 번째 클릭 숨기기, 두 번째 클릭 다시 표시

  10. 10

    JQuery는 첫 번째 클릭시 실행되지 않지만 두 번째 클릭시 실행됩니다.

  11. 11

    두 번째 클릭시 버튼 클릭이 실행되지 않음

  12. 12

    두 번째 클릭시 jQuery가 실행되지 않음

  13. 13

    Android-두 번째 버튼 클릭시 다음 실행

  14. 14

    두 번째 클릭시 SVG 애니메이션 반전

  15. 15

    두 번째 클릭시 다른 기능이있는 버튼 및 텍스트 변경

  16. 16

    기능은 두 번째 클릭 전에 팝업을 엽니 다

  17. 17

    두 번째 클릭 후 기능 작동

  18. 18

    div에서 두 번째 클릭 기능?

  19. 19

    Tkinter 첫 번째 클릭 첫 번째 기능, 두 번째 클릭 두 번째 기능

  20. 20

    클릭 기능 내에서 클릭 및 다시 클릭 기능

  21. 21

    두 번째 클릭시 하위 div 숨기기

  22. 22

    LitElement 클릭 기능이 두 번 실행됩니다.

  23. 23

    Jquery 메뉴 첫 번째 클릭하여 표시 두 번째 클릭하여 메뉴 숨기기

  24. 24

    버튼 클릭으로 클라이언트 측 및 서버 측 기능 모두 수행-특정 시나리오

  25. 25

    두 번째 클릭시 역순

  26. 26

    첫 번째 모달을 숨기고 클릭 기능에 두 번째 모달 표시

  27. 27

    첫 번째 클릭시 애니메이션 전환이 실행되지 않음

  28. 28

    버튼 클릭시 행에서 n 번째 셀 얻기

  29. 29

    클릭시 실행하려면 두 가지 기능이 필요합니다.

뜨겁다태그

보관