⛅ Day 033 

 🌲 Effect 

 🌱 show / hide  

• .show() : 화면에 보여지게 하는 함수

  • display:none 상태의 대상에 display:block 을 쓰지 않고 화면에 보이게 한다.

  • 각종 옵션으로 화면에 나타나는 변화에 또다른 효과를 줄 수도 있고 당연히 display:block의 내용은 포함되어 실행된다.
    ( span태그에 show()를 적용하면 inline태그였던 span태그가 block태그처럼 width가 한줄 전체를 차지한다.
    -> 배경색을 입히면 눈에 확 보임)

• show와 함께 다른 동작을 추가하고 싶다면 .show( function(){ } )
  이처럼 show() 안에 function(){} 을 넣어서 실행시킨다.
  .show()에 익명함수를 넣으면, 함수 동작 시간에 약간의 동작시간지연이 포함된다. (500밀리초)

• 그 시간(500ms)보다 적거나 큰 다른 플레이시간과 익명함수를 동시에 지정할 수도 있다.

🚨 index()사용시 주의할 점

• 버튼들 사이에 다른 태그가 존재한다면, 첫번째 버튼부터 마지막버튼까지 index() 함수로 인덱스를 추출할 때,
  그 사이의 다른 태그들도 순서적으로 같이 인덱스가 부여된다.
  즉 3,4번째 버튼 인덱스가 4,5가 된다. (아래 HTML코드블럭 참고)

• 같은 태그들을 대상으로 위와 같이 index를 사용하고자 한다면 되도록이면 중간에 다른 태그 없이 사용하는 것이 좋다.

• 그러나 eq를 사용해서 인덱스를 지정할 때는 선택자에 쓰여진 대상들에만 인덱스가 부여되어 0~3으로 사용할 수 있다.

• HTML

      <button>Show It</button> <button>Hide It</button>
      <span>안녕하세요</span> <br>

      <button>Show It Slow</button> <button>Hide It Slow</button>
      <span>반갑습니다.</span>

 🌱 show / hide / toggle  

• 앞예제의 show버튼과 hide버튼을 하나로 합치기

---

• CSS
  span {font-size:180%; font-weight:bold; display:none;}
  
  

• HTML

<button>Show It / Hide It</button> <span>안녕하세요</span>   <br>
<button>Show It / Hide It</button> <span>반갑습니다.</span>

• jQuery
  
  
  

 🌱 slideUp / slideDown / slideToggle 

• CSS
  div {background:#3d9a44; margin:3px; width:80px; height:100px; float:left;}

• HTML
  

• jQuery
  
  
  

 🌱 fadeIn / fadeOut / fadeToggle 

• CSS
  

• HTML
  

• jQUery
  

 🌱 fadeToggle의 실행순서 

• CSS
  

• HTML
  

• jQuery
  
  
  

 🌱 Ex 01. 

• setInterval을 사용해셔 1초에 한번씩 익명함수가 실행되게 하기

• 익명함수의 내용은 모든 div를 fadeOut 하고, 변수에 의해 진행되고 있는 번호로 현재이미지에 해당하는 div만 fadeIn 한다.

• CSS
  div {position:absolute; left:0; top:0; display:none; }
img {width:500px; height:350px;}

• HTML
  <div><img src="images/Desert.jpg"></div><!-- X 6개-->

• jQuery
  
  
  

 🌱 Ex02 : TabMenu 

• 제이쿼리 명령을 이용하여 ul li들의 각 배경색을 해당 색깔로 맞춰주기

• 탭메뉴(ul li) 중 하나를 클릭하면 해당 content를 보이게(show())하고 나머지를 감추기(hide())

---

• CSS
  

• HTML
  

• jQuery
  
  
  

 🌱 Ex03 : sideMenu 

• 메뉴에 마우스가 올라가면 해당 메뉴는 opacity를 1로 변경, 나머지 메뉴는 0.3으로 변경

• 메뉴영역에서 마우스가 완전히 빠져나가면 모든 메뉴의 opacity를 1로 변경

---

• CSS
  

• HTML
  

• jQuery
  
  
  

 🌱 Animate 

• 각 div에 마우스가 올라가면 현재위치에서 left 값을 500으로 설정해서 오른쪽으로 이동하고, 마우스가 빠져나가면 제자리로 돌아옴

• 기존의 쓰던 방법(이벤트를 활용)을 쓰면 div 움직임이 이상해진다.
  왜냐면 div가 움직이면서 마우스가 div의 영역에서 빠져나가자마자 돌아오려고 하고 다시 마우스가 들어오면 나가려고 하기 때문이다.

• 이 때, animate()를 쓰면 자연스러운 움직임을 구현할 수 있다.

---

• CSS
  div {width:50px; height:50px; margin:3px; background:orange; position:relative;}

• HTML : div 6개

• jQuery
  

 🍂 Plugin 

• 다른 사람이 만든 jQuery함수를 가져다가 사용할 수도 있다.
• javascirpt 파일을 다운받아서 html문서에 script해서 사용하면 됨

 🌲 TagControll : jQuery 

• JavaScript로 했던 TagCotroll 연습예제들을 jQuery로 해보기

 🌱 TagControll 01 

• 각 이미지에 마우스가 올라가면 이미지를 다음과 같이 변경하기

• 1.jpg ➡️ 3.jpg   /   2.jpg ➡️ 4.jpg

 🌱 TagControll 02 

• 그림을 클릭하면 입력창을 열고, 숫자하나를 입력받아서 입력받은 숫자.jpg로 이미지를 바꾸기

 🌱 TagControll 03 

• 1초에 한번씩 다음 이미지로 변경 이미지 번호는 1~10까지
  10번이 지나면 다시 1번으로 돌아감
  
  
  

 🌱 TagControll 04 

• 1초에 한번씩 다음 이미지로 변경, 이미지 번호는 1~10, 10번까지 변경하면 다시 1번으로 돌아간다

• 마우스가 이미지에 올라가면 타이머(이미지 변경)가 멈추고, 마우스가 벗어나면 다시 시작한다.
  
  
  

 🌱 TagControll 05 

• 1초에 한칸(170px씩 이동), animate를 이용하기
  마우스가 올라가면 이동을 멈추고, 마우스가 빠지면 이동을 다시 시작

 🌱 TagControll 06 

• 버튼을 클릭하면 해당이미지의 위치로, animate를 이용해서 imgs를 이동

• 클릭된 버튼은 배경은 검은색, 글자는 흰색으로 변경

• 최초 그림이 1번그림이므로 1번 버튼은 검은색배경, 흰글자로 시작

• class를 만들어서 addClass / removeClass 활용

---

• CSS
  

• HTML
  

• jQuery
  
  
  

 🌱 TagControll 07 

1. 이미지들을 이전 예제와 같이 배치

2. 좌우 버튼을 이미지의 하단 좌우에 배치하고 배경을 설정하여 좌우버튼(<, >)으로 표시하기

3. 좌우 버튼을 클릭하여 이미지를 한칸씩 이동하기

4. id:currentNum에 해당하는 div를 오른쪽 상단에 배치하고,
   이미지가 이동할 때마다 현재 이미지 번호를 표시하기 (1/8, 2/8, ..., 8/8)
   적절한 크기의 흰색 글자로 표시, div의 크기및 기타 css는 임의로 맞춰서 설정

---

• CSS
  

• HTML
  

• jQuery