생활 웹디자인

에니메이션

토픽 생활 웹디자인 > 인터렉션 > jQuary

효과란?

  • 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.
  • jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.

예제1.

<!DOCTYPE html>
<html>
    <head>
        <style>        span {
                color:red;
                cursor:pointer;
            }
            div {
                margin:3px;
                width:80px;
                height:80px;
            }
            div {
                background:#f00;
            }
</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <input type="button" id="fadeout" value="fade out" />
        <input type="button" id="fadein" value="fade in" />
        <input type="button" id="hide" value="hide" />
        <input type="button" id="show" value="show" />
        <input type="button" id="slidedown" value="slide down" />
        <input type="button" id="slideup" value="slide up" />
        <input type="button" id="mix" value="mix" />
        <div id="target">
            target
        </div>
        <script>$('input[type="button"]').click( function(e) {
                var $this = $(e.target);
                switch($this.attr('id')) {
                    case 'fadeout':
                        $('#target').fadeOut('slow');
                        break;
                    case 'fadein':
                        $('#target').fadeIn('slow');
                        break;
                    case 'hide':
                        $('#target').hide();
                        break;
                    case 'show':
                        $('#target').show();
                        break;
                    case 'slidedown':
                        $('#target').hide().slideDown('slow');
                        break;
                    case 'slideup':
                        $('#target').slideUp('slow');
                        break;
                    case 'mix':
                        $('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
                        break;
                }
            }) 
        </script>
    </body>
</html>

예제2.

 <!DOCTYPE html>
<html>
    <head>
        <style>        
            div {
                background-color:#bca;
                width:100px;
                border:1px solid green;
            }
</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <button id="go">
            &raquo; Run
        </button>

        <div id="block">
            Hello!
        </div>
        <script>/* Using multiple unit types within one animation. */

            $("#go").click( function() {
                $("#block").animate({
                    width: "300px",
                    opacity: 0.4,
                    marginLeft: "50px",
                    fontSize: "30px",
                    borderWidth: "10px"
                }, 3000);
            });</script>
    </body>
</html>

 

댓글

댓글 본문
  1. labis98
    20210925 좋은 강의 감사합니다.
  2. 허공
    감사합니다!
  3. 삼고잉
    클릭이벤트 핸들러안에 animate 함수를 연동해서 애니메이션 효과를 주는군요
  4. 치킨
    초간단하넼ㅋㅋ
  5. sheis
    잘 봤어요^^
  6. crable
    감사합니다.
  7. 잼따~
    많이 똑똑 하신것 같아요
  8. 김진석
    조금 똑똑 하신것같아요
  9. 완료!
    완료! 감사합니다~
  10. tachyon
    감사합니다!
  11. JustStudy
    고맙습니다
  12. 유기농브래드
    좋은 강의 만들어주셔서 감사합니다~!!
  13. 쥬슈야
    강좌 잘 듣고 있습니다. 감사합니다.
    그리고 애니를 즐기는 사람으로서 강좌 제목 에니메이션을 → 애니메이션으로 수정해주셨으면 좋겠습니다. +_+
  14. Youngmin Kweon
    좋은 강의 감사드립니다.
    한가지 질문 있는데요..
    예제에서
    var $this = $(e.target);
    이렇게 변수 선언하는 특별한 이유가 있는건지요??
    그냥 변수 선언없이 $(this)로 하더라도 괜찮은거 아닌가 해서요?
  15. 초량강
    쇼핑몰꾸미다가 점점 새로운걸 알아가고있어서 재미는 있는데
    머리가 너무 아파요 ㅋㅋㅋㅋㅋ
  16. leeta
    질문있습니다.
    예제1번이요 복사문에는 없는데 동영상 강의 안의 예제에는
    하단 부분에+
    $('#fadeout').click(function(){
    $('div').fadeOut('slow');
    });
    $('#fadein').click(function(){
    $('div').fadeIn('slow');
    });
    이부분이 추가로 더있습니다. 예제 1복사해도 잘만 되던데
    차이점이 무엇이 있을까요?
  17. 포스만빵
    재미있습니다. ㅋ
  18. 잘 보고 있습니다.
  19. 행인
    애니메이션부분에 쿼크였나 순차적으로진행되는 설명 넣어주셨으면 해요좋은강좌 잘보고갑니다