Study/jQuery

jQuery Effects

posey 2022. 12. 12. 09:23

2022.12.12.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 62



Review


 

 

 

 

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 62

 

<click event 복습>

 

 

- HTML

 

    <p id="txt1">This is a paragraph.</p>
    <p id="txt2">This is a paragraph.</p>
    <p id="txt3">Input Field : <input type="text" value="Mickey Mouse" /></p>
    <button id="btn1">Set Text</button>
    <button id="btn2">Set HTML</button>
    <button id="btn3">Set Value</button>

 

 

- jQuery

 

    <script>
    
      $(function () {
        $("#btn1").click(function () {
          $("#txt1").text("Hello world !");
        });

        $("#btn2").click(function () {
          $("#txt2").text("Hello world !").css("font-weight", "bold");
        });

        /*  $("#btn3").click(function () {
          $("#txt3 input").val("Dolly duck");
        });  */

        let bo = true;

        $("#btn3").click(function () {
          if (bo) {
            $("#txt3 input").val("Dolly duck");
          } else {
            $("#txt3 input").val("Mickey Mouse");
          }

          bo = !bo;
        });
      });
      
    </script>

 

0

 

if / else문을 이용해서 toggle과 비슷하게 구현했다.

 

 

 

 

- callback 함수란?

: js에서 함수는 object라고 한다. 그래서 함수는 다른 함수의 인자로 쓰일 수도 어떤 함수에 의해

리턴될 수도 있다. 이런 함수를 고차 함수라고 한다.

결국, 인자로 넘겨지는 함수를 콜백 함수라고 한다. 또한, 단지 함수를 등록하기만 하고 어떤

이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수이다.

 

콜백 함수는 현재 효과가 100% 완료된 후에 실행된다.

그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있다.

이로 인해 오류가 발생할 수 있다. 이를 방지하기 위해 콜백 함수를 만들 수 있다.

 

 

 

 

 

<show() / hide() / toggle() 메소드 알아보기>

 

 

- HTML

 

    <p></p>
    <button id="btn1">Show</button>
    <button id="btn2">Hide</button>
    <button id="btn3">Toggle</button>

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }

 

 

- jQuery

 

    <script>
    
      $(function () {
        $("body").append('<div id="div1"></div>');
        $("#btn2").click(function () {
          $("p").hide(1000, function () {
            // callback 함수란 쉽게 말해 다른 함수가 실행을 끝낸 뒤 실행되는, 즉, callback 되는 함수를 말함

            $("#div1").text("display : " + $("p").css("display") + ";");
          });
          // $("p").css("display", "none");
        });

        $("#btn1").click(function () {
          $("p").show("500");
          // $("p").css("display", "");

          $("#div1").text("display : " + $("p").css("display") + ";");
        });

        $("#btn3").click(function () {
          $("p").toggle();

          $("#div1").text("display : " + $("p").css("display") + ";");
        });
      });
      
    </script>

 

0

 

 

 

 

 

 

<show() / hide() / trigger() 메소드 예제>

 

- HTML

 

    <p></p>
    <button id="btn1">Show</button>
    <button id="btn2">Hide</button>
    <button id="btn3">Toggle</button>

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }

 

 

- jQuery

 

    <script>
    
      //  $(선택자).show(spedd, easing, callback)
      // easing: swing, linear

      $(function () {
        $("body").append('<div id="div1"></div>');

        function myfnc() {
          $("#div1").text("p 태그의 display : " + $("p").css("display") + ";");
        }

        $("#btn2").click(function () {
          $("p").hide(1000, "swing", function () {
            myfnc();
          });
          //$("p").css("display", "none");
        });

        $("#btn2").trigger("click");
        // trigger() 메소드는 괄호 안에 들어가 있는 걸 강제로 호출시키는 역할

        $("#btn1").click(function () {
          $("p").show(500, "linear", myfnc);
          // $("p").css("display", "");
        });

        $("#btn3").click(function () {
          $("p").toggle(1000, myfnc);
        });
      });
      
    </script>

 

0

trigger() 메소드를 사용해서 새로고침을 하면 앞에 설정한 hide()가 실행된다.

 

 

 

 

<show() - opacity 적용하기 예제>

 

 

 

- HTML

 

    <p></p>
    <button id="btn1">Show</button>
    <button id="btn2">Hide</button>

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
        
        transition: 0.5s;
      }

 

 

- jQuery

 

    <script>
    
      //  $(선택자).show(spedd, easing, callback)
      // easing: swing, linear

      $(function () {
        $("#btn1").click(function () {
          $("p").css("opacity", "1");
        });

        $("#btn2").click(function () {
          $("p").css("opacity", "0");
        });
      });
      
    </script>

 

 

0

 

 

 

<animation class로 적용하기 예제>

 

 

 

- HTML

 

    <p></p>
    <button id="btn1">Show</button>
    <button id="btn2">Hide</button>
    <button id="btn3">Toggle</button>

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }
      
      .ani1 {
        animation: ani_show 1s forwards;
      }

      .ani2 {
        animation: ani_hide 1s forwards;
      }

      @keyframes ani_show {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes ani_hide {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

 

 

- jQuery

 

    <script>

      $(function () {
        $("#btn1").click(function () {
          $("p").removeClass().addClass("ani1");
        });

        $("#btn2").click(function () {
          $("p").removeClass().addClass("ani2");
        });

        $("#btn3").click(function () {
          $("p").toggle();
        });
      });
      
    </script>

 

 

0

 

 

 

 

<fadeIn(), fadeOut(), fadeToggle(), fadeTo() 알아보기>

 

 

- HTML

 

    <p></p>
    <button id="btn1">Show</button>
    <button id="btn2">Hide</button>
    <button id="btn3">Toggle</button>
    <button id="btn4">fadeTo</button>

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }

 

 

- jQuery

 

    <script>

      $(function () {
        $("#btn1").click(function () {
          $("p").fadeIn(1000);
        });

        $("#btn2").click(function () {
          $("p").fadeOut(1000);
        });

        $("#btn3").click(function () {
          $("p").fadeToggle(1000);
        });

        $("#btn4").click(function () {
          $("p").fadeTo(1000, 0.5);
        });
      });
      
    </script>

 

 

 

0

 

 

 

<fadeTo 예제>

 

 

- HTML

 

    <p></p>
    <button id="btn1">0</button>
    <button id="btn2">0.5</button>
    <button id="btn3">0.6</button>
    <button id="btn4">1</button>

 

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }

 

 

 

- jQuery

 

    <script>
    
      /*  $(function () {
        $("body").append('<div id="div1"></div>');
        $("body").append('<div id="div2"></div>');

        $("#btn1").click(function () {
          $("p").fadeTo(500, 0);
          $("#div1").text("display : " + $("p").css("display"));
          $("#div2").text("opacity : " + $("p").css("opacity"));
        });

        $("#btn2").click(function () {
          $("p").fadeTo(500, 0.5);
          $("#div1").text("display : " + $("p").css("display"));
          $("#div2").text("opacity : " + $("p").css("opacity"));
        });

        $("#btn3").click(function () {
          $("p").fadeTo(500, 0.6);
          $("#div1").text("display : " + $("p").css("display"));
          $("#div2").text("opacity : " + $("p").css("opacity"));
        });

        $("#btn4").click(function () {
          $("p").fadeTo(500, 1);
          $("#div1").text("display : " + $("p").css("display"));
          $("#div2").text("opacity : " + $("p").css("opacity"));
        });
      });  */

      // 위의 문법을 요약
      $(function () {
        $("body").append('<div id="div1"></div>');
        $("button").click(function () {
          /*   let i = $(this).text();
               $("p").fadeTo(500, i);  */

          // callback 함수
          $("p").fadeTo(500, $(this).text(), function () {
            $("#div1").html(
              "display : " +
                $("p").css("display") +
                "<br>" +
                "opacity : " +
                $("p").css("opacity") +
                "<br>"
            );
          });
        });
      });
      
    </script>

 

0

 

 

<slideUp(), slideDown(), slideToggle() 메소드 알아보기>

 

 

- HTML

 

    <p></p>
    <button id="btn1">slideup</button>
    <button id="btn2">slidedown</button>
    <button id="btn3">slidetoggle</button>

 

 

 

- CSS

 

      p {
        width: 100px;
        height: 100px;

        background: #ccc;

        margin: 0 auto 40px;
      }
      
      #page {
        margin-bottom: 20px;
      }

 

 

 

- jQuery

 


   <script>
      $(function () {
        $("body").prepend('<div id="page"></div>');
        $("#btn1").click(function () {
          $("p").slideUp(50, "swing", function () {
            myfnc();
            // callback 함수 실행
          });
        });

        $("#btn2").click(function () {
          $("p").slideDown(500, "linear", myfnc);
        });

        $("#btn3").click(function () {
          $("p").slideToggle(1000, myfnc);
        });

        function myfnc() {
          $("#page").text("display : " + $("p").css("display"));
        }
      });
      
    </script>

 

 

0

 

 

<slideLeft(), slideRight(), slideToggle() 메소드 알아보기>

 

 

- HTML

 

    <p></p>
    <button id="btn1">slideLeft</button>
    <button id="btn2">slideRight</button>
    <button id="btn3">slideToggle</button>

 

 

 

- CSS

 

      p {
        position: relative;
        top: -30px;
        left: 535px;

        width: 100px;
        height: 100px;

        background: #ccc;

        transition: 1s;
      }

 

 

 

- jQuery

 

    <script>
    
      $(function () {
        $("#btn1").click(function () {
          $("p").css("width", "0");
        });

        $("#btn2").click(function () {
          $("p").css("width", "100px");
        });

        let status = true;

        $("#btn3").click(function () {
          if (status) {
            $("p").css("width", "0px").css("backgroundColor", "#f00");
          } else {
            $("p").css("width", "100px").css("backgroundColor", "#8ac007");
          }
          status = !status;
        });
      });
      
    </script>

 

 

0

 

 

<class로 slide 적용하기예제>

 

 

- HTML

 

    <p></p>
    <button id="btn1">slideLeft</button>
    <button id="btn2">slideRight</button>
    <button id="btn3">slideToggle</button>

 

 

 

- CSS

 

      button {
        padding: 10px 20px;
        margin-bottom: 20px;
        margin-right: 10px;

        font-size: 18px;
      }

      p {
        position: relative;
        top: -30px;
        left: 380px;

        width: 100px;
        height: 100px;

        background: #ccc;

        transition: 1s;
      }

      @keyframes ani {
        100% {
          width: 0;
          background: #8ac007;
        }
      }

      .slide {
        animation: ani 1s forwards;
      }

 

 

 

- jQuery

 

    <script>
    
      $(function () {
        $("#btn1").click(function () {
          $("p").css("width", "0");
        });

        $("#btn2").click(function () {
          $("p").css("width", "100px");
        });

        let status = true;

        $("#btn3").click(function () {
          if (status) {
            $("p").addClass("slide");
          } else {
            $("p").removeClass();
          }
          status = !status;
        });
      });
      
    </script>

 

0

 

 

<Effects 응용 예제>

 

 

- HTML

 

    <p>
      <button class="btn1">slideUp</button>
    </p>
    <p>
      <button class="btn3">slideToggle</button>
    </p>
    <p>
      <button class="btn4">fadeTo(0.3)</button>
      <button class="btn5">fadeTo(1)</button>
    </p>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </div>

 

 

 

- CSS

 

      button {
        padding: 10px 20px;
        margin-bottom: 20px;
        margin-right: 10px;

        font-size: 18px;
      }

      div {
        width: 500px;

        background: #222222e0;
        color: #fff;

        margin: 0 auto;
        padding: 30px;

        border-radius: 8px;

        text-align: justify;
      }

 

 

 

- jQuery

 

    <script>
    
      $(function () {
        $(".btn1").click(function () {
          let txt = $(this).text();

          if (txt == "slideUp") {
            $("div").slideUp(1000, function () {
              $(".btn1").text("fadeIn");
            });
          } else {
            $("div").fadeIn(1000, function () {
              $(".btn1").text("slideUp");
            });
          }
        });

        $(".btn3").click(function () {
          $("div").slideToggle(1000);
        });

        $(".btn4").click(function () {
          $("div").fadeTo(1000, 0.3);
        });

        $(".btn5").click(function () {
          $("div").fadeTo(1000, 1);
        });
      });
      
    </script>

 

 

 

0

 

 

 

 

 

 

 

<남은 글자수 세기 예제>

 

 

- HTML

 

    <p>남은 글자수</p>
    <h1>150</h1>
    <textarea name="msg" id="msgbox" cols="30" rows="10"></textarea>
    <div id="status"></div>
    <button id="btn">초기화</button>

 

 

- CSS

 

      button {
        padding: 10px 20px;

        font-size: 18px;
      }

      textarea {
        resize: none;

        margin-top: 20px;
      }

      div {
        margin: 10px auto;
        padding: 25px 10px;
      }

      #status {
        width: 200px;

        text-align: center;

        padding: 5px 20px;
      }

 

 

- jQuery

 

    <script>
    
      /*  [JS 요약 설명]
        1. val : 폼 양식에 저장된 값을 얻어온다.
        2. keyup : 키보드 누른 후 >> 올라 간 상태를 확인한다.
      */

      $(function () {
        $("#msgbox").keyup(function () {
          // keyup은 msgbox에 텍스트를 입력하는 것을 뜻한다.
          let num = $(this).val().length;

          $("h1").text(150 - num);

          let len = $("h1").text();

          if (len > 0) {
            $("h1").css("color", "#00f");
          } else {
            $("h1").css("color", "#f00");
            $("#status")
              .text(Math.abs(len) + " 글자를 초과하였습니다.")
              .css("color", "white")
              .css("background", "red");
          }

          /*  let over = num - 150;
          if (num > 150) {
            $("#status").text(over + " 글자를 초과하였습니다.").css;
          }  */

          $("#btn").click(function () {
            $("h1").text("150").css("color", "#222222");
            $("#msgbox").val("");
            $("#status").text("").css("background", "none");
          });
        });
      });
      
    </script>

 

 

* 참고 출처 : https://velog.io/@jrl103/710-15%EC%9D%BC%EC%B0%A8

 

 

0

 

 

<keyup(), keydown(), keypress 알아보기>

 

 

- HTML

 

    <input type="text" />
    <br />
    <div>count : <span>0</span></div>

 

 

- CSS

 

      input {
        padding: 10px 20px;

        font-size: 18px;
      }

      div {
        margin-top: 30px;
      }

 

 

- jQuery

 

    <script>
    
      $(function () {
        let i = 0;

        /*$("input").keyup(function () {
            // 키보드에서 손을 뗐을 때 실행
          $("span").text(i += 1);
        });*/

        /*$("input").keydown(function () {
          // 키보드를 누를 때 실행
          $("span").text(i += 1);
        });*/

        $("input").keypress(function () {
          $("span").text((i += 1));
        });
      });
      
    </script>

 

 

0

 

 

 

 

 

 

 

 

* 내용 출처

: https://www.habonyphp.com/2019/05/jquery_13.html

반응형