JQuery effect

$('h1,h3').next().hide();

h1태그와 h3 태그 다음 형제 노드인 div 태그를 숨긴다.

$('h1,h3').click(function(e){

      //$(e.target).next().toggle(500);

      $(e.target).next().fadeToggle(1000);

    });

클릭하면 div가 fadeToggle 천천히 생성된다. 

h1을 클릭했기 때문에 h1의 div의 자식인 h3가 생성되고 h3를 다시 클릭하면 h3의 div가 생성된다.

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

      $('#logo').animate({width:'50%',heigth:'50%'},2000);

      $('#logo').animate({width:'10%',heigth:'10%'},1900);

      $('#logo').animate({width:'300%',heigth:'300%'},400);

      $('#logo').animate({width:'100%',heigth:'100%'},400);

    });

.animate()

animate는 properties를 받는데 properties는 object이다. 

>> 

.animate({

property:value,

property:value

},duration, complete(){...})

 

 

 $(function () {

            // animate() 메서드를 사용합니다.

            $('div').animate({ left: '+=60' }, 2000);

            $('div').animate({ width: '+=60' }, 2000);

            $('div').animate({ height: '+=60' }, 2000);

            // 3초 후에 함수를 실행합니다.

           

            setTimeout(function () {

                // 애니메이션 큐를 제거합니다.

                $('div').clearQueue();

                // 효과 메서드를 사용합니다.

                $('div').hide();

            }, 3000);

        });

 

 

setTimeout(실행할 함수, 시간 설정)

 

clearQueue() 애니메이션 큐를 제거 (진행중인 애니메이션이 있다면 정지되고 큐도 제거된다.)

 

delay(ms).animate() ms초 후 실행 

 

$('.circle').approach({

                opacity: 0.2

            }, 200);

 접근할때 투명도 변경

 

 

$(document).ready(function () {

            $('div').hover(function () {

                $(this).addClass('reverse', 1000);

            }, function () {

                $(this).removeClass('reverse', 1000);

            });

        });

마우스가 위에 올라오면 .addClass('reverse',1000); 'reverse'클래스를 생성해주고 

'reverse'클래스가 생성되면 style에 설정된 코드에 따라 색상이 바뀌고 removeClass 함수가 실행되면 사라지면서 원래색상으로 돌아온다.

.reverse {

            color:White;

            background-color:gray;

        }

여기서 hover(function, function) 두개 함수가 인자로 들어갔는데

첫번째 함수는 hover 되었을때 실행되고 두번째함수는 hover out 되었을때 실행되는 함수이다.