알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

[jQuery]애니메이션 본문

Web /JQuery

[jQuery]애니메이션

백곳 2017. 8. 25. 18:12

에니메이션


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

<!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>



<!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>


에니메이션은 직접 예제코드를 실행 하시는편이 가장 이해하기 쉽고 좋을것 같습니다. 


'Web > JQuery' 카테고리의 다른 글

ajax+django(csrf) 통신하기  (0) 2017.08.27
[jQuery ] 폼 이벤트  (0) 2017.08.23
[jQuery]엘리먼트 제어  (0) 2017.08.23
[javascript,jQuery] 이벤트란?  (0) 2017.08.23
[jQuery] Chain이란?  (0) 2017.08.23
공유하기 링크
'Web /JQuery' Related Articles more
Comments