hasClass / attr

 

if문에서만 쓸수있고, toggleClass('open')이 있어야 함
hasClass('open') ==> open클래스를 보여줘라

html소스

<div class="page-main" role="main">

    <aside>

        <ul>

            <li><a href="#"><img src="img/01_aside.png"></a></li>

            <li><a href="#"><img src="img/02_aside.png"></a></li>

            <li><a href="#"><img src="img/03_aside.png"></a></li>

        </ul>

        <button><img src="img/btn_open.png"></button>

        <!--button은 가까운부모중 기본값이 아닌 다른 값을 가지고 있는 aside를기준으로 움직인다.즉 버튼을 따라 움직이게 된다-->

    </aside>

</div>

$(function(){
var $aside = $('aside'),
$button = $aside.find('button'),
$duration = 300;
/*$button = $('aside button'); 이렇게 쓰면 시간오래걸림
이미 위에 변수를 지정해서 ..큰거부터찾고 find--find(자식..자식..)하는게 빠르다.*/

//버튼을 클릭하면 aside가 나오도록 해주세용
//자바스크릷트에서는 선택자.classList.add='open';
//css에서 aside느 left: -350px;
//제이쿼리에서는 클래스명 추가 선택자
//A.addClass('b c'); A.removeClass('b'); A toggleClass('b');
//A.hasClass('b')조건문에서만 사용. a요소에 b라는 클래스가 있으면 true,
//없으면 false

//속성변경하기, 속성의 값을 반환하기
//<img src="img/btn_open.png">에서 img는 속성(atturibute)값은 src이다
//A.attr('b') = a라는 요소의 b라는 속성의 값이 몬지 알아와서 변수명 c에 저장.
//button안에 img에 src라는 속성을 가져와서 콘솔에 찍어보자.
//vac c = A.attr('src');  
//A.attr('src', 'c');  -->A의 속성 src를 c로 바꿔라
//<img src="images/logo.svg"의 속성을 logoshrink.svg로 바꾸고 다시 부활
console.log($button.find('img').attr('src'));

/*내가쓴 잘못 소스$aside.css({left:0 + 'px'});*/

$button.click(function(){
/*$aside.stop().animate({left:'0px'},$duration);이렇게말고 아래*/
/*$aside.addClass('open'); 아래*/
$aside.toggleClass('open'); --> 얘가 있어야 hasClass('open')이 실행되더라.

if($aside.hasClass('open')){
/*$aside.stop().animate({right:'-70px'},$duration,'easeOutBack');
이부분 주석처리하고 css에서도 이같은 효과낼수있다.
$aside에 open이라는 클래스가 있으면 right:-70px;
그 과정을 보여줘~애니메이션은 css에서 하는게 효과적이다. 제이쿼리에서는 hasClass('open')부분만 하는게 시간단축에 더좋다. css소스 아래.
*/
$button.find('img').attr('src','img/btn_close.png');
} else {
//$aside.stop().animate({right:'-350px'},$duration,'easeInBack');
$button.find('img').attr('src','img/btn_open.png');
}
});
});

 

//css소스

.page-main > aside {

    background-color: rgba(0,0,0,0.8);

    width: 350px;

    height: 100%;

    top: 0;

    right: -350px;

    position: fixed;

    transition:0.3s cubic-bezier(.63,-0.21,.49,1.02); --->변하는 과정을 보여줘.

   

}

.page-main > aside.open {

    right:-70px;  --> open클래스가 있으면 right:-70px

}