[J-Query] Style 속성 변경

style 속성 변경

✨ css()

css()는 비교적 단순한 스타일을 적용할 때 활용하고, 특정 스타일을 확인 / 변경할 경우 사용한다.

• $(셀렉터).css("속성") : 선택한 요소의 스타일 값을 받아온다.
• $(셀렉터).css("속성", "값") : 선택한 요소의 스타일 값을 변경한다.

.css() 의 () 안에는 ("속성", "값") 으로 넣어주는 방법과 {'속성' : '값'} 으로 중괄호를 사용해주는 방법이 있다.

{} 중괄호를 사용해 줄 경우 오브젝트 형태로 여러개의 스타일을 한번에 지정할 수 있다는 장점이 있다.

$('#ex2').css('color', color);
$('#ex2').css('font-size', size);
🔻
$('#ex2').css({'color' : color, 'font-size' : size});

하지만 이렇게 해도 너무 길어질 경우에는 addclass를 사용해줄 수 있다.

✨ addclass()

이미 선언된 클래스를 적용/삭제할 경우 사용하며, 비교적 복잡한 스타일을 사용할 경우 유용하게 사용 가능하다.

• $(셀렉터).addclass("클래스이름") : 선택한 요소에 해당 클래스 추가
• $(셀렉터).removeclass("클래스이름") : 선택한 요소에 해당 클래스 삭제
• $(셀렉터).toggleclass("클래스이름") : 선택한 요소에 해당 클래스 추가 / 삭제

❗ 클래스 이름은 말 그대로 클래스 이름만 작성해줘야 한다.
. 을 작성하지 않는다! (앞에 class만 들어올 수 있다고 명시했으니까)

🔽 사용 예시
3개의 버튼과 ex1 이라는 스타일 클래스가 있다고 가정하고 버튼을 클릭하면 div 요소에 스타일이 지정되는 코드를 작성해보자

$('#add').on('click', ()=>{
    $('div').addClass('ex1');
});
$('#remove').on('click', ()=>{
    $('div').removeClass('ex1');
});
$('#toggle').click(()=>{
    $('div').toggleClass('ex1');
});

🎥 애니메이션 효과

📼 hide & show

• Hide : 해당 요소를 사라지게 하는 기능 (display : none)
• Show : 해당 요소를 보이게 하는 기능 (display : block)
• Toggle : 두 기능을 번갈아 가며 실행

hide, show, toggle 에는 3개의 요소를 넣을 수 있다.

• speed : milliseonds, slow, fast
• easing : swing(가속), linear(평균)
• callback : 효과가 끝나고 실행할 기능

---

• $().hide(speed, callback)
• $().show(speed, callback)
• $().toggle(speed, easing, callback)

애니메이션 효과를 하나씩 주는게 어려우니까 이런걸 제공하는 것이다.

🔽 사용 예시

div 요소에 마우스가 올라가면 ul 요소가 보여지고, 마우스가 div 요소에서 나가면 ul 요소가 숨겨지는 코드를 작성해보자

$('div').hover(function(){
    $('ul').show('slow');
}, function(){
    $('ul').hide('slow');
});

이번에는 off 버튼을 클릭하면 p 요소가 보여지고 다시 클릭하면 버튼이 on으로 바뀌며 p요소가 숨겨지는 코드를 작성해보자

$('#toggle').click(function(){
    if($('#toggle').html() == 'OFF'){
        $('p').hide('slow', 'swing', function(){
            $('#toggle').html('ON');
        });
    } else{
        $('p').show('slow', 'swing', function(){
            $('#toggle').html('OFF');
        });
    }
});

📼 Fade effect

• fadeIn() : 서서히 나타나는 효과
• fadeout() : 서서히 사라지는 효과
• fadeToggle() : 위 두개의 효과를 토글 (번갈아 실행)
• fadeTo() : opacity 조정

• speed : milliseonds, slow, fast
• opacity : 도달할 투명도 수치
• callback : 효과가 끝나고 실행할 기능

---

• $(셀렉터).fadeIn(speed, callback);
• $(셀렉터).fadeOut(speed, callback);
• $(셀렉터).fadeToggle(speed, callback);
• $(셀렉터).fadeTo(speed, opacity, callback);

🔽 사용예시

버튼을 누르면 div 요소가 서서히 나타나고, 다른 버튼을 누르면 div 요소가 서서히 사라지는 코드를 작성해보자!

$('#viz').click(function(){
    $('div').fadeIn('slow'); // speed, easing, callback
});

$('#inviz').click(function(){
    $('div').fadeOut(3000);
});

이번에는 토글을 활용해서 2개의 효과를 모두 줄 수 있는 코드를 작성해보자

$('#toggle').click(function(){
    $('div').fadeToggle('fast', function(){
        var flag = $('div').css('display');
        if(flag == 'none'){
            $('#toggle').html('ON');
        }else{
            $('#toggle').html('OFF');
        }
    });
});

$('img').hover(function(){
    $(this).fadeTo('slow', 0.2);
}, function(){
    $(this).fadeTo('slow',1)
});

디스플레이로 만들어 두고 오퍼시티를 0~1로 점점 올라가고
out을 누르면 블록을 만든다?
(none 과 block)

📼 Slide

슬라이드는 어떠한 이벤트가 발생하면 펼쳐지거나 접히는 효과이며, 메뉴에 가장 많이 활용된다.

• slideup() : 요소가 아래 → 위로 크기가 작아지며 사라지는 효과
• slideDown() : 요소가 위 → 아래로 크기가 커지며 나타나는 효과
• fadeToggle() : 위 두개의 효과를 토글 (번갈아 실행)

• speed : milliseonds, slow, fast
• callback : 효과가 끝나고 실행할 기능

---

🔽 사용예시

메뉴에 마우스를 올리면 숨어있던 세부내용이 펼쳐지고 마우스가 영역을 나가면 세부내용이 숨겨지는 코드를 작성해보자

        $('#flip2').on('mouseenter',down);

        $('#flip2').on('mouseleave',function(){
            $('#flip2').off('mouseenter');// 이벤트 발생시 off 로 이벤트를 지워준다.
            $(this).next().slideUp('slow',function(){ 
                // 애니메이션이 모두 종료되면 이벤트를 다시 걸어준다.
                $('#flip2').on('mouseenter',down);
            });
        });

        function down(){
            $(this).next().slideDown('slow');
        }

위 코드의 경우 이벤트가 쌓이면서 마우스가 벗어난 후에도 동작하는걸 막아주기 위해 off() 를 함께 사용해주었다.

✨ animate

이러한 애니메이션 기능들은 만들어진 것 이외에도 직접 만들어 사용할 수도 있는데 animate() 는 해당 기능을 수행하게 해주는 함수이다. (커스터마이징)

$(...).animate({params}, speed, easing, callback);

• params : css 에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정) (누적해서 속성을 넣을 수 있다.)
• speed : 애니메이션이 시작해서 끝날때까지 걸릴 시간 (milliseonds, slow, fast)
• easing : swing(가속), linear(평균)
• callback : 애니메이션종류 후 일어날 기능

---

🔽 사용예시

$('#right').click(function(){
    $('#obj').animate({left : '+=1000'}, 3000, 'swing'); 
});
$('#left').click(function(){
    $('#obj').animate({left : '-=1000'}, 3000, 'swing');
});

📼 stop

$(...).stop(); : 진행 중인 내용을 정지 시킨다.

🔽 사용예시

$('#stop').click(function(){
	$('#obj').stop();
});

📼 메소드 체이닝

자바에서 처럼 . 으로 이어서 애니메이션 효과를 줄 수 있다.
이렇게 작성할 경우 순차적으로 여러 애니메이션을 실행시킬 수 있다.

🔽 사용예시

$('#step').click(function(){
    $('#obj').animate({left : '+=500'}, 'slow')
    .animate({top : '+=500'}, 'slow')
    .animate({left : '-=500'}, 'slow')
    .animate({top : '-=500'}, 'slow');
});