JQuery STEP 3 - JQuery Effect

★ jQuery Alias

//원래 이렇게 써야하는 것을
jQuery('#btn1')
//Alias 를 통해 $기호로 이용 가능하도록 제공
$('#btn1')

 

★ jQuery Effection function

• jQuery Effect 처리 다양한 함수.
• 1. hide(), show(), toggle()

//1. hide(), show(), toggle()
//hide(time), show(time), toggle(time)

// hide() : 박스를 숨기는 것
$('#btn1').click( () => {
    $('#box').hide();
});

// show() : 박스를 보이게 하는 것
$('#btn2').click( () => {
    $('#box').show();
});

// toggle() : 박스를 숨기고, 보이게 하는 것
$('#btn3').click( () => {
    $('#box').toggle();
});

// 시간 값을 주었을 경우 ('slow', 'fast', 사용자 정의시간(1000))
$('#btn1').click( () => {
    $('#box').hide('slow');
});

$('#btn2').click( () => {
    $('#box').show('fast');
});

$('#btn3').click( () => {
    $('#box').toggle('1000');
});

• 2. fadeOut(), fadeIn(), fadeToggle() : 사라졌다가 다시 나타남

//2. fadeOut(), fadeIn(), fadeToggle()

$('#btn1').click( () => {
    $('#box').fadeOut('slow');
});

$('#btn2').click( () => {
    $('#box').fadeIn('slow');
});

$('#btn3').click( () => {
    $('#box').fadeToggle('slow');
});

• 3. slideUp(), slideDown(), slideToggle() : 슬라이드가 열고 닫힘.

//3. slideUp(), slideDown(), slideToggle()

$('#btn1').click( () => {
    $('#box').slideUp('slow');
});

$('#btn2').click( () => {
    $('#box').slideDown('slow');
});

$('#btn3').click( () => {
    $('#box').slideToggle('slow');
});

• 4. animate() : 사용자 정의 

$('#btn1').click( () => {
    $('#box').animate({
        width : '400px',
        height : '400px'
    });
});

$('#btn2').click( () => {
    $('#box').animate({
        width : 200,
        height : 200
    });
});

$('#btn3').click( () => {
    // $('#box').toggle('slow');
    // $('#box').fadeToggle('slow');
    // $('#box').slideToggle('slow');
    $('#box').animate({
        width : '+=100',
        height : '+=100',
        'margin-left' : '+=50px',
        marginTop : '+=50px'
    });
});

 

■ 다양한 ex)

• ex1) 여러개의 이펙트를 주기

$('#btn4').click(function() {

   $('#box').slideUp().slideDown().hide(1000).show(1000);

});

• ex2) 이펙트를 종료 직후 처리하는 업무 

$('#btn5').click(function() {
    $('#box').hide(3000, function() {
        //Effect 종료 직후 처리하는 업무
        $(document.body).css('background-color', 'grey');
    });
});