animation

2023. 7. 28. 17:07ใ†jquery

animation?

js์™€ css๋ฅผ ์ด์šฉํ•ด์„œ ์—˜๋ฆฌ๋จผํŠธ์— ๋™์ ์ธ ํšจ๊ณผ ๋ถ€์—ฌ

jQuery์˜ ํšจ๊ณผ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๊ฐ„๋‹จํžˆ ํšจ๊ณผ ๋ถ€์—ฌ ๊ฐ€๋Šฅ

 

ex1)

<!DOCTYPE html>
<html>
    <head>
        <style>
        	body {
        		margin: 100px;
        	}        
        	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':
                    	//์—ฌ๋Ÿฌ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋‹ค์ค‘ ์ ์šฉ                 1์ดˆ๊ฐ„ ์ •์ง€(๋ฐ€๋ฆฌ์ดˆ)                      ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ์ด๋ฒคํŠธ ๋ฐœ์ƒ
                        $('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
                        break;
                }
            }) 
            
        </script>
    </body>
</html>

fade out : ์„œ์„œํžˆ ์‚ฌ๋ผ์ง

fade in : ์„œ์„œํžˆ ๋‚˜ํƒ€๋‚จ

hide : ์ˆจ๊น€

show : ๋‚˜ํƒ€๋‚ด๊ธฐ

silde down : ์Šฌ๋ผ์ด๋“œ ํ˜•ํƒœ๋กœ ๋‚ด๋ ค์˜ค๋ฉด์„œ ๋‚˜ํƒ€๋‚จ

silde ip : ์Šฌ๋ผ์ด๋“œ ํ˜•ํƒœ๋กœ ์˜ฌ๋ผ๊ฐ€๋ฉด์„œ ์‚ฌ๋ผ์ง

mix : ์—ฌ๋Ÿฌ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฉ”์†Œ๋“œ ํ˜ผํ•ฉ ๊ฐ€๋Šฅ

 

animate ๋ฉ”์†Œ๋“œ

๋ฌธ๋ฒ• :

animate(์ตœ์ข… ๊ฒฐ๊ณผ,์ง„ํ–‰ ์†๋„)

ex2)

<!DOCTYPE html>
<html>
    <head>
        <style>
         	body {
        		margin: 100px;
        	}              
           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>
            //์˜ˆ์ œ2
            $("#go").click( function() {
            			//animate ๋ฉ”์†Œ๋“œ์˜ ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ css ์ฝ”๋“œ : ์ตœ์ข… ๊ฒฐ๊ณผ์— ํ•ด๋‹น ๋˜๋Š” ์ฝ”๋“œ
            			//์ตœ์ข… ๊ฒฐ๊ณผ๋กœ ๊ฐ€๋Š” ์ค‘๊ฐ„๋‹จ๊ณ„๋“ค์„ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋ฉด์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ
                $("#block").animate({
                    width: "300px",
                    //๋ถˆํˆฌ๋ช…๋„
                    opacity: 0.4,
                    marginLeft: "50px",
                    fontSize: "30px",
                    borderWidth: "10px"
                    //๋‘๋ฒˆ์งธ ์ธ์ž ์ˆซ์ž > ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง„ํ–‰ ์†๋„ (3์ดˆ)
                }, 3000);
            });
            
        </script>
    </body>
</html>

run ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ > ์ง€์ •ํ•œ ์ตœ์ข… ๊ฒฐ๊ณผ๋กœ ์ง€์ •ํ•œ ์‹œ๊ฐ„์— ๋งž์ถฐ์„œ ๋ณ€ํ™”

์ €์ž‘์žํ‘œ์‹œ

'jquery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

traversing(ํƒ์ƒ‰)  (0) 2023.07.28
Form  (0) 2023.07.28
Mainpulation(์—˜๋ฆฌ๋จผํŠธ ์ œ์–ด)  (0) 2023.07.28
event  (0) 2023.07.28
Chain  (0) 2023.07.27

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”