VScode/JQuery

[JQuery] button, effect

hvoon 2022. 9. 9. 14:54

show()

-화면에 보여지게 하는 함수.

-display:block을 쓰지 않고 show 함수를 써서 화면에 보이게 함.

-각종 옵션으로 화면에 나타나는 변화에 또다른 효과를 줄 수도 있고 당연히 display:block의 내용 포함되어 실행됨

-show와 함께 다른 동작을 추가하고 싶다면 .show(function(){})처럼 show()안에 function(){}을 넣어서 실행시킴

-.show()에 익명함수를 넣으면 함수 동작 시간에 약간의 동작시간지연이 포함됨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effect01.html</title>
    <style type="text/css">
        span{font-size:180%; font-weight: bold; display: none;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                var idx=$(this).index();
                if(idx==0){
                } else if(idx==1){
                } else if(idx==2){
                } else if(idx==3){
                }
            });
// $('button').eq(0).click(function(){}); 아래와 같이 써도 됨
            $('button:eq(0)').click(function(){

                // $('span:first').css('background','yellow'); 
                // $('span:first').show(); 
// 위 명령들을 하나로 합쳐서 명령할 수 있게 함수 사용환경을 제공함
                $('span:first').show(function(){
                    $(this).css('background','yellow')
                });
            });
            $('button:eq(1)').click(function(){
// 지연시간은 익명함수 없이 함수에 직접 지정하여 동작하게 할 수도 있음
                $('span:first').hide(50);
            });
            $('button:eq(2)').click(function(){
                $('button:eq(2)').click(function(){
                    $('span:last').show(2000,function(){
                        $(this).css('background','orange');
                    });
                });
            });
            $('button:eq(3)').click(function(){
                $('button:eq(3)').click(function(){
                    $('span:last').hide(2000);
                });
            });
        });
    </script>
</head>
<body>
    <button>show it</button> <!-- 버튼을 만드는 또다른 방법 -->
    <button>hide it</button>
    <span>hi</span>
    <br>
    <button>show it slow</button>
    <button>hide it slow</button>
    <span>hello</span>
</body>
</html>
 
기본 화면
각각의 show 버튼을 누른 후 hide 버튼을 누르면 사라짐
 
 
toggle()

1) 태그 번호 지정하여 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effect02.html</title>
    <style type="text/css">
        span{font-size:180%; font-weight: bold; display: none;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        var state=false;
        $(function(){
            $('button:eq(0)').click(function(){
                if(state==false){
                    state=true;
                    $('span:first').show();
                }else{
                    state=false;
                    $('span:first').hide(); 
                }
            });
        });
        */
       $(function(){
           $('button:eq(0)').click(function(){
               $('span:first').toggle(1000,function(){
                   $(this).css('background','orange');
               });
           });
           $('button:eq(1)').click(function(){
               $('span:last').toggle(2000,function(){
                   $(this).css('background','yellowgreen');
               });
           });
       });
    </script>
</head>
<body>
    <button>show it / hide it</button> 
    <span>hi</span>
    <br>
    <button>show it slow / hide it slow</button>
    <span>hello</span>
</body>
</html>
 
 

2) slide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effect03.html</title>
    <style type="text/css">
        div{background:yellowgreen; margin:3px; width:80px; height:100px; float:left;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#slideUp').click(function(){
                $('div').slideUp(1000,function(){
                    $(this).css('background','blue');
                });
            });
            $('#slideDown').click(function(){
                $('div').slideDown(1000,function(){
                    $(this).css('background','red');
                });
            });
            $('#slideToggle').click(function(){
                $('div').slideToggle(500);
            });
        });
    </script>
</head>
<body>
    <button id="slideUp">slideup</button>
    <button id="slideDown">slidedown</button>
    <button id="slideToggle">slidetoggle</button>
    <br/><br/><br/>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
 
 

 

fadeIn(), fadeOut(), fadeToggle()

예제1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effect04.html</title>
    <style type="text/css">
        span{color:red; cursor:pointer;}
        div{margin:3px; width:100px; display:none; height:100px; float:left;}
        div#red{background: red;}
        div#green{background: green;}
        div#blue{background: blue;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#fin').click(function(){
                $('div').fadeIn(2000);
            });
            $('#fout').click(function(){
                $('div').fadeOut(2000);
            });
            $('#fToggle').click(function(){
                $('div').fadeToggle(2000);
            });
        });
    </script>
</head>
<body>
    <span id="fin">fade in</span>&nbsp;&nbsp;&nbsp;
    <span id="fout">fade out</span>&nbsp;&nbsp;&nbsp;
    <span id="fToggle">fade toggle</span>&nbsp;&nbsp;&nbsp;
    <br/><br/><br/>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>
</html>
 

 

예제2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effect05.html</title>
    <style type="text/css">
        p{position:relative; width:400px; height:90px;}
        div{position:absolute; width:400px; height:65px; 
            font-size:36px; text-align:center; color:yellow;
            background:red; padding-top:25px; top:0px; left:0; 
            display:none;}
        span{display:none;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#fadeIn').click(function(){
                $('div').fadeIn(1000,function(){
                    $('span').fadeIn(1000);
                });
            });
            $('#fadeOut').click(function(){
                $('span').fadeOut(1000,function(){
                    $('div').fadeOut(1000);
                });
            });
            $('#fadeToggle').click(function(){
                $('div').fadeToggle(1000,function(){
                    $('span').fadeToggle(100);
                });
            });
        }); 
// fadein의 순서: div -> span
// fadeout의 순서: span-> div 
// 만약 toggle을 사용하면 그 순서를 유지할 수 없다는 단점이 있음
    </script>
</head>
<body>
    <p>안녕하세요반갑습니다</p>
    <div><span>success!</span></div>
    <button id="fadeIn">fadeIn</button>
    <button id="fadeOut">fadeOut</button>
    <button id="fadeToggle">fadeToggle</button>
</body>
</html>
 
 

 

이미지 슬라이드 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EffectEx.html</title>
    <style type="text/css">
        div{position:absolute; left:0; display: none;}
        img{width:500px; height:350px;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
// setInterval을 사용하여 1초에 한번씩 익명함수가 실행되게 함
// 익명함수의 내용은 모든 div를 fadeout하고, 
// 변수에 의해 진행되고 있는 번호로 
// 현재이미지에 해당하는 div만 fadein 함
        $(function(){
            var num=0;
            setInterval(function(){
                // 제일 좋은 방법
                for(var i=0; i<=5; i++){
                    if(num==i) $('div').eq(i).fadeIn(1000);
                    else $('div').eq(i).fadeOut(1000);
                }
                num++;
                if(num==6) num=0;
            },1500);
        });
    </script>
</head>
<body>
    <div><img src="images/Desert.jpg"/></div>
    <div><img src="images/Hydrangeas.jpg"/></div>
    <div><img src="images/Chrysanthemum.jpg"/></div>
    <div><img src="images/Koala.jpg"/></div>
    <div><img src="images/Penguins.jpg"/></div>
    <div><img src="images/Tulips.jpg"/></div>
</body>
</html>
 

*setInterval(function(){ 이 안의 내용 변경 })

방법 2

$('div').eq(0).fadeOut(1000);
$('div').eq(1).fadeOut(1000);
$('div').eq(2).fadeOut(1000);
$('div').eq(3).fadeOut(1000);
$('div').eq(4).fadeOut(1000);
$('div').eq(5).fadeOut(1000);
 

방법 3

$('div').fadeOut(1000); // 모든 div 태그 fadeOut
 

방법 4

for(var i=0; i<=5; i++)
   $('div').eq(i).fadeOut(1000);
$('div').eq(num).fadeIn(1000);
 

 

 

저작자표시 (새창열림)