[강의 정리]D15 J-Query#5

1. slideUp(), slideDown() , slideToggle()

 

보통의 모양

 

<내려왔을 때 바로 올라올때 고치는 법>

 //문제점 : 슬라이드 업이 될 때 마우스가 들어오면 다시 슬라이드 다운 실행

        //해결책 : 마우스가 나갔다 들어왔을 때 슬라이드 다운이 실행 x

        //1. 마우스 엔터 -> 슬라이드 다운

        $('#flip').on('mouseenter',down);// 어쩔수 없이 on 써야함.!!!!

        //2. 마우스 아웃 -> 슬라이드 업, 마우스 엔터 off -> 마우스엔터 on

        $('#flip').on('mouseleave',function(){

            $(this).off('mouseenter');//그 다음에 이렇게 꺼주고

            $(this).next().slideUp('slow',function(){ // 여기 먼저 해주고 , 그 다음에 콜백함수 넣어주면 되겠지

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

            });

        })

        function down(){

            $(this).next().slideDown('slow');

        }

 

+주의 : slideUp은 위로 올라온느게 아니라 크기가 작아지며 사라지는 효과임을 알것! 

 

2. animate 애니메이트

 

- 커스터마이징 할 수 있는 기능임

animate({}, speed, easing, callback) 의 모양임

 

speed : 1500, 'slow'

easing : 'swing', 'linear' 등이 있음 

 

*linear은 평이하게 움직이는거 

swing은 가속도 붙여서

 

 

<마우스를 따라다니는 코드 만들기>

e.clientY등으로 e를 사용해서 바로 붙힌 용법이 특이하다.

 

3.Method Chaning 메소드 체이닝

- 연속적으로 동작할 수 있게 하는거. 걍 . 부터 뒤에 다 가져다 붙이면 됨

 

4. 요소 추가 하기 (append, prepend, after, before)

***

append : 선택한 요소 내 마지막에 추가(

prepend : 선택요 요소 내 시작점에 추가

after : 선택한 요소의 바로 뒷 부분에 추가

before : 선택한 요소의 바로 앞 부분에 추가

 

5. remove, empty

- 어려운건 없다. 

remove:  그 선택 요소와 하위요소 삭제하는것

empty : 선택한 요소 하위요소만 삭제하는것

원래

empty

remove

한것

 

6.[주의] 요소 면적

***** 나중에 헷갈리니 주의

width :순수 element

innerWidth : element + padding

outerWidth : element + padding + border

outerWidth_ture : element + padding + border + margin

 

outerWidth_ture의 사용법

 

 

특정 요소를 더하는데

예를들어 outerWidth라면

element + padding + border

3+ 10 + 400 + 10 + 3 =426

 

이다. 하지만 양쪽에 더해줘야 함으로 두번 더한다는것을 잊지 말것