공부 노트

- 메서드(이펙트) :

.show() .hide() : 보이기, 감추기

.toggle() : 보이기 / 감추기

.slideDown() .slideUp() : 서서히 보이기(위에서 밑으로),  감추기

.slideToggle() 

*toggle은 하나가 두가지 기능!'

- show hide toggle 메서드

    <div class="container">
        <h2>show hide toggle</h2>
        <a href="#none" class="show-btn">show</a>
        <a href="#none" class="hide-btn">hide</a>
        <a href="#none" class="toggle-btn">toggle</a>
        <div class="box">Box</div>
    </div>

.container {
	width: 300px;
}
a {
	display: inline-block;
    padding: 5px;
    color: #000;
    background-color: #ddd;
    width: 70px;
    text-align: center;
    border-radius: 5px;
}
.box {
	margin-top: 10px;
    width: 240px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: dodgerblue;
    color: #fff;
    display: none;
}
.btn {
	width: 210px;
}

// show hide toggle 1
$('.show-btn').click(function() {
    $('.box').show();
});
$('.hide-btn').click(function() {
    $('.box').hide();
});
$('.toggle-btn').click(function() {
    $('.box').toggle();
});

- slideDown slideUp slideToggle 메서드

슬라이드 다운 : 서서히 위에서 밑으로 내려옴

// show hide toggle 2
$('.show-btn').click(function() {
    $('.box').slideDown();
});
$('.hide-btn').click(function() {
    $('.box').slideUp();
});
$('.toggle-btn').click(function() {
    $('.box').slideToggle();
});

- fadeIn fadeOut fadeToggle 메서드

fadeIn(지속시간)   : 페이드로 나타나게 하는 효과

fadeOut(지속시간) : 페이드로 사라지게 하는 효과

fadeIn('fast') 

fadeIn('slow')

fadeIn(500) // 0.5s

fadeIn(2000) // 2s

// show hide toggle 3
$('.show-btn').click(function() {
    $('.box').fadeIn();
});
$('.hide-btn').click(function() {
    $('.box').fadeOut();
});
$('.toggle-btn').click(function() {
    $('.box').fadeToggle();
});