jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo )

2018. 3. 5. 22:44

참고 사이트:

애니메이션 효과(animation) 1: hide, show

- 라이브러리 파일들을 위 사이트에서 다운받아야만이 위 효과를 줄 수 있음.

- api사전과 적용사례를 보면서 효과를 선택 및 적용

http://api.jqueryui.com/hide/

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>show()_hide()</title>
    <style>
    
        #imgWrap
        {
            border:1px #000000 solid;
            width:220px;
            height:220px;       
            text-align:center;
            margin-bottom:20px; 
                    
        }       
    </style>
    
    
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
    <script>        
    //  easing 플러그인 다운      http://gsgd.co.uk/sandbox/jquery/easing/
    //  easing 데모     http://jqueryui.com/resources/demos/effect/easing.html
    //  라이브러리 파일들을 위 사이트에서 다운받아야만이 위 효과를 줄 수 있음.
    
        var $imgWrap;  //  img 태그를 포함하는 태그
        
        $(document).ready(function(){
            
            $imgWrap = $("#imgWrap");
            
            $("#btn_hide").bind("click", onHide);
            
            $("#btn_show").bind("click", onShow);
            
            $("#btn_toggle").bind("click", onToggle);
            
        });
        
        function onHide(){
            
            //  http://api.jqueryui.com/hide/
            //  위 사이트에서 예제를 보면서, hide되는 스타일을 고를 수 있음
            $imgWrap.hide(3000, "easeOutExpo", function(){
                alert("hide");
            });
        }
        
        function onShow(){
            
            $imgWrap.show(3000, "easeOutExpo", function(){
                
                alert("show");
            });
        }
        
        function onToggle(){
            
            $imgWrap.toggle(3000, "easeOutCubic", function(){
                
                alert("toggle");
            });
        }
    
    
    
                
            
    </script>
</head>
<body>
    <div id="imgWrap"> 
            <img id="img1" src="images/img1.jpg">
    </div>      
   
    <div>
        <button id="btn_show">show</button>
        <button id="btn_hide">hide</button>
        <button id="btn_toggle">toggle</button>            
    </div>
   
</body>
</html>

애니메이션 효과(animation) 2: 메뉴, 서브메뉴 활용한 show, hide

- 잠깐 팁

menu_list 안의 바로 밑에 있는 자식객체로 설정 (>) 하지않으면 그안에 있는 li 전부포함하게됨

$(".menu_list li")는 클래스명이 menu_list 인 모든 li태그를 선택하는 선택자

$(".menu_list > li")는 클래스명이 menu_list 인 바로 아래 자식 li태그를 선택하는 선택자

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>showHide_Menu</title>
<style>
body,p,img,ul,li{
    margin:0px; padding:0px; list-style:none; border:none; 
}
div#top_bg{
    width:100%; height:30px; background:#2c2c2c;
}
div#top{
    width:980px; height:30px; margin:0px auto;  background:#2c2c2c;
}
ul.top_list{
    float:right; margin-top:3px; 
}
div#menu_bg{
    width:100%; height:80px; background:#edeef0;
}
div#menu{
    width:980px; margin:0px auto; background:#edeef0; position:relative; left:0px; top:0px; 
}
span#logo{
    position:absolute; left:0px; top:10px; 
}
ul.menu_list li{
    float:left; width:160px;  position:relative; text-align:center;
}
ul.menu_list{
    position:absolute; left:160px ; top:30px; 
}
span.best_btn{
    position:absolute; left:830px; top:25px; 
}
ul.subMenu{
    position:absolute; left:0px; top:50px;
}
div#sub_bg{
    width:100%; height:230px;   background:#000;
}
</style>
<script src="../libs/jquery-1.7.1.min.js"></script>
<script src="../libs/jquery.easing.1.3.js"></script>
<script>
    
    var $mainMenu;
    var $subMenu;
    
    $(document).ready(function(){
        
        //  잠깐 팁
        //  menu_list 안의 바로 밑에 있는 자식객체로 설정 (>) 하지않으면 그안에 있는 li 전부포함하게됨
        //  $(".menu_list li")는 클래스명이 menu_list 인 모든 li태그를 선택하는 선택자
        //  $(".menu_list > li")는 클래스명이 menu_list 인 바로 아래 자식 li태그를 선택하는 선택자
        
        $mainMenu = $(".menu_list>li");
        $subMenu = $(".subMenu");
        
        $subMenu.hide();  //  초반에는 숨겨주기

        $mainMenu.bind("mouseover", onOver);
        $subMenu.bind("mouseout", onOut);
                
    });
    
    function onOver(){
        
        $subMenu.hide();
        $(this).children(".subMenu").show();
    }
    
    
    function onOut(){
        
        $(this).children().hide();
    }
    
</script>
</head>
<body>
    <div id="top_bg">
        <div id="top">
            <ul class="top_list">
                <li><img src="images/top_menu.gif" alt=""></li>
            </ul>
        </div>   
    </div>
    <div id="menu_bg">
        <div id="menu">
            <span id="logo">
                <img src="images/gnb_logo.gif" alt="">
            </span>
           
            <ul class="menu_list">
                <li><a href="#"><img src="images/gnb_menu1_off.gif" alt=""></a>
                        <ul class="subMenu">
                            <li><a href="#"><img src="images/sub1.png" alt=""></a></li>
                       
                        </ul>              
                </li>
             
                <li><a href="#"><img src="images/gnb_menu3_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="images/sub3.png" alt=""></a></li>
                       
                     </ul>              
                </li>
                <li><a href="#"><img src="images/gnb_menu4_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="images/sub4.png" alt=""></a></li>
                       
                     </ul>              
                </li>
                <li class="last" ><a href="#"><img src="images/gnb_menu1_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="images/sub5.png" alt=""></a></li>
                       
                        </ul>              
                </li>          
            </ul>
            <span class="best_btn">
                <a href="#"><img src="images/gnb_menu6.gif" alt=""></a>
            </span>   
       
        </div>
   
    </div>
   
</body>
</html>

애니메이션 효과(animation) 3: slideUp, slideDown

실제 메뉴바가 위에서 부터 천천히 보여지는 슬라이드 기능을 가진 show, hide

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>slideUp()_Down()</title>
    <style>
        #imgWrap
        {
            border:1px #000000 solid;
            width:220px;
            height:220px;
            
            text-align:center;
            margin-bottom:20px; 
                    
        }
        
        
    </style>
    
    
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
    <script>
        
        var $imgWrap;
        
        $(document).ready(function(){
            
            $imgWrap = $("#imgWrap");
            
            $("#btn_hide").bind("click", onSlideDown);
            $("#btn_show").bind("click", onSlideUp);
            $("#btn_slideToggle").bind("click", onSlideToggle);
            
        });     
        
        function onSlideDown(){
            
            $imgWrap.slideDown(3000, "easeOutCubic", function(){
                //alert('slideShow');
            })
        }
        
        function onSlideUp(){
            
            $imgWrap.slideUp(3000, "easeOutCubic", function(){
                //alert('slideShow');
            })
        }
        
        function onSlideToggle(){
            
            $imgWrap.slideToggle(3000, "easeOutCubic", function(){
                //alert('slideShow');
            })
        }       
        
    </script>
</head>
<body>
    <div id="imgWrap"> 
        <img id="img_1" src="images/img1.jpg">
    </div>      
    
    <div>
        <button id="btn_hide">slideUp</button>
        <button id="btn_show">slideDown</button>
        <button id="btn_slideToggle">slideToggle</button>
    </div>
</body>
</html>

애니메이션 효과(animation) 4: 애니메이션 중복 막기1 "선택자:not(:animated)"

크게 2가지 방식이 있음

첫번째 방식(사용자가 천천히 확인하는 것: 메뉴바)

"선택자:not(:animated)" 를 통해서, 이벤트 안걸려 있는 것만 애니메이션 걸기

두번째 방식(사용자가 빨리 확인하는 것: 그림클릭)

stop() 메소드 사용: 현재 애니메이션 작동중인 것 중지

에니메이션을 안하고 있는 태그만 애니메이션 기능 넣기

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>slide_Menu</title>
<style>
body,p,img,ul,li{
    margin:0px; padding:0px; list-style:none; border:none; 
}
div#top_bg{
    width:100%; height:30px; background:#2c2c2c;
}
div#top{
    width:980px; height:30px; margin:0px auto;  background:#2c2c2c;
}
ul.top_list{
    float:right; margin-top:3px; 
}
div#menu_bg{
    width:100%; height:80px; background:#edeef0;
}
div#menu{
    width:980px; height:80px; margin:0px auto; background:#edeef0; position:relative; left:0px; top:0px; 
}
span#logo{
    position:absolute; left:0px; top:10px; 
}
ul.menu_list li{
    float:left; width:160px;  position:relative; text-align:center;
}
ul.menu_list{
    position:absolute; left:160px ; top:30px; 
}
span.best_btn{
    position:absolute; left:830px; top:25px; 
}
ul.subMenu{
    position:absolute; left:0px; top:50px;
}
div#sub_bg{
    width:100%; height:230px;   background:#000;
}
</style>
<script src="../libs/jquery-1.7.1.min.js"></script>
<script src="../libs/jquery.easing.1.3.js"></script>
<script>
    
    var $mainMenu;
    var $subMenu;
    var $subBg;
    
    $(document).ready(function(){
        
        //  tip
        //  ul, li가 상위 관계의 태그들에 많이 쓰는 이유: ul 아래의 자식객체로는 li밖에 안들어옮. 그러므로 상위 관계 작업할때, ul, li를 많이 씀.
        
        $maniMenu = $(".menu_list").children();
        $subMenu = $(".subMenu");
        $subBg = $("#sub_bg");
        
        $subMenu.hide();
        $subBg.hide();
        
        $maniMenu.bind("mouseover", onOver);
        $subBg.bind("mouseout", onOut);
        
        
    });
    
    function onOver(){
        /*
        $subBg.slideDown(500, "easeOutExpo", function(){
            
            $subMenu.show();
        });
        */
        
        $("#sub_bg:not(:animated)").slideDown(500, "easeOutExpo", function(){
            
            $subMenu.show();
        });
        
    }
    
    function onOut(){
        $subMenu.hide();
        $("#sub_bg:not(:animated)").slideUp(500, "easeOutExpo", function(){
            
            
        });
        
        
    }
    
</script>
</head>
<body>
    <div id="top_bg">
        <div id="top">
            <ul class="top_list">
                <li><img src="../01_show()_hide()/images/top_menu.gif" alt=""></li>
            </ul>
        </div>   
    </div>
    <div id="menu_bg">
        <div id="menu">
            <span id="logo">
                <img src="../01_show()_hide()/images/gnb_logo.gif" alt="">
            </span>
           
            <ul class="menu_list">
                <li><a href="#"><img src="../01_show()_hide()/images/gnb_menu1_off.gif" alt=""></a>
                        <ul class="subMenu">
                            <li><a href="#"><img src="../01_show()_hide()/images/sub1.png" alt=""></a></li>
                       
                        </ul>              
                </li>
             
                <li><a href="#"><img src="../01_show()_hide()/images/gnb_menu3_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="../01_show()_hide()/images/sub3.png" alt=""></a></li>
                       
                     </ul>              
                </li>
                <li><a href="#"><img src="../01_show()_hide()/images/gnb_menu4_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="../01_show()_hide()/images/sub4.png" alt=""></a></li>
                       
                     </ul>              
                </li>
                <li class="last" ><a href="#"><img src="../01_show()_hide()/images/gnb_menu1_off.gif" alt=""></a>
                    <ul class="subMenu">
                            <li><a href="#"><img src="../01_show()_hide()/images/sub5.png" alt=""></a></li>
                       
                        </ul>              
                </li>          
            </ul>
            <span class="best_btn">
                <a href="#"><img src="../01_show()_hide()/images/gnb_menu6.gif" alt=""></a>
            </span>   
       
        </div>
   
    </div>
     <div id="sub_bg">
        
   
   
    </div>
   
</body>
</html>

애니메이션 효과(animation) 5: fadeIn, fadeOut, fadeToggle, fadeTo

* Tip: fadeTo

fadeTo

$imgWrap.fadeOut(3000, 0.2, "easeOutExpo");

내가 원하는 투명도를 지정할 수 있음

또한 opacity 0으로 하면, 태그가 hidden이 되는게 아니라, opacity 0으로 되게됨.

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>fadeIn()_Out()</title>
    <style>
        #imgWrap{
            border:1px #000000 solid;
            width:220px;
            height:220px;           
            text-align:center;
            margin-bottom:20px; 
                    
        }
        
        
    </style>
    
    
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
    <script>
        
        var $imgWrap;
        
        $(document).ready(function(){
            
            $imgWrap = $("#imgWrap");
            
            $("#btn_show").bind("click", onFadeIn);
            
            $("#btn_hide").bind("click", onFadeOut);
            
            $("#btn_fadeToggle").bind("click", onFadeToggle);
        });
        
        function onFadeIn(){
            
            //  내가 원하는 투명도를 지정할 수 있음
            $imgWrap.fadeIn(3000, "easeOutExpo", function(){
                //alert("1");
            });
        }
        
        function onFadeOut(){
            
            /*
            $imgWrap.fadeOut(3000, 0.2, "easeOutExpo", function(){
                //alert("2");
            });*/
            
            $imgWrap.fadeTo(3000, 0.2, "easeOutExpo");
            //  fadeTo
            //  $imgWrap.fadeOut(3000, 0.2, "easeOutExpo");
            //  내가 원하는 투명도를 지정할 수 있음
            //  또한 opacity 0으로 하면, 태그가 hidden이 되는게 아니라, opacity 0으로 되게됨.
            
        }
        
        function onFadeToggle(){
            
            //  내가 원하는 투명도를 지정할 수 있음
            $imgWrap.fadeToggle(3000, "easeOutExpo", function(){
                //alert("3");
            });
        }
        
        
            
    </script>
</head>
<body>
    <div id="imgWrap"> 
        <img id="img_1" src="images/img1.jpg">
    </div>      
    
    <div>
        <button id="btn_show">fadeIn</button>
        <button id="btn_hide">fadeOut</button>  
        <button id="btn_fadeToggle">fadeToggle</button>
    </div>
</body>
</html>

애니메이션 효과(animation) 6: 애니메이션 중복 막기2 stop()

크게 2가지 방식이 있음

첫번째 방식(사용자가 천천히 확인하는 것: 메뉴바)

"선택자:not(:animated)" 를 통해서, 이벤트 안걸려 있는 것만 애니메이션 걸기

두번째 방식(사용자가 빨리 확인하는 것: 그림클릭)

stop() 메소드 사용: 현재 애니메이션 작동중인 것 중지

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>fadeMenu</title>
    <style>
    
    body,p,img,ul,li{
        margin:0px; padding:0px; border:none; list-style:none;
    }
    body{
        margin:200px; background:#000;
    }
    div#imgWrap{
        width:1000px; height:200px; float:left;
    }
    
    ul.img_list li{
        width:200px; float:left; margin-right:30px;
    }   
                
    </style>    
    
    <script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
    <script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
    <script>
        
     var $sumImg;
    
    $(document).ready(function(){
        
        $sumImg = $(".img_list").children("li");
        
        $sumImg.css("opacity", 0.2);
        
        $sumImg.bind("mouseover", onOver);
        
        $sumImg.bind("mouseout", onOut);
     });
    
     function onOver(){
        //  stop: 하던 애니메이션이 있으면 하고, 진행해라
        $(this).stop();
        
        $(this).fadeTo(200, 1, "easeOutExpo");
     }
    
     function onOut(){
        $(this).stop();
        $(this).fadeTo(200, 0.2, "easeOutExpo");
        
     }
    
    </script>
</head>
<body>
    <div id="imgWrap">
        <ul class="img_list">
            <li> <a href="#"><img src="images/img3.jpg" alt="" /></a></li>
            <li> <a href="#"><img src="images/img4.jpg" alt="" /></a></li>
            <li> <a href="#"><img src="images/img5.jpg" alt="" /></a></li>
            <li> <a href="#"><img src="images/img6.jpg" alt="" /></a></li>     
        </ul>       
    </div>      
</body>
</html>

저작자표시 비영리 변경금지

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

jquery, javascript_스터디10( 3dept메뉴네비게이션-mouseenter, mouseleave / 메뉴네비게이션 이미지이용 애니메이션, 아코디언 메뉴-배열, index() / 2depth 메뉴 네비게이션-동시에 4가지이벤트 ) (0)	2018.03.14
jquery, javascript_스터디9( 이미지 갤러리-index(), 슬라이드 이미지 갤러리 ) (0)	2018.03.12
jquery, javascript_스터디8( animate, 이미지 슬라이더 직접코딩, 이미지 갤러리 직접코딩, a 링크 누르면 이동 금지 ) (0)	2018.03.07
jquery, javascript_스터디6( 위치 활용: 이미지 x, y축으로 움직이기, 스크롤값이용 이미지 올리기) (0)	2018.02.28
jquery, javascript_스터디5( setInterval 활용한 랜덤숫자 css, clearInterval, 상태변수, 화면위치좌표:position, outerHeight, outerWidth, scrollTop, scrollLeft, top, left ) (0)	2018.02.26
jquery, javascript_스터디4( attr, click, mouseover, mouseout, 임의함수이벤트걸기, bind, unbind, setInterval, Math.random, parseInt ) (0)	2018.02.21

강서딸바보's TECH

jquery, javascript_스터디7( 애니메이션-show, hide, toggle, slideDown, slideUp, slideToggle, 애니메이션 중복막기, stop, fadeIn, fadeOut, fadeToggle, fadeTo )

'코드(프로그램언어) > 자바스크립트(Javascript),제이쿼리(Jquery)' 카테고리의 다른 글

+ Recent posts

티스토리툴바