반응형
준비물: (jQuery) 연결하기
이 블로그에 적용되어 있다.
CSS에 추가한다.
width, height를 알맞게 바꾼 후, margin의 top, left에 50%의 값을 입력한다.
아래의 자바스크립트 코드를 SCRIPT 내부 또는 JS 파일로 저장하여 연결한다.
.fadeOut(speed, callback)
매치된 요소를 감춘다. 인자를 입력하지 않으면 400ms 속도로 작동한다.
speed 인자에는 'slow', 'normal', 'fast' 를 입력할 수 있으며 각각 600ms, 400ms, 200ms 이다.
또는 밀리초를 숫자로 입력하면 된다.
.fadeOut() 메서드 대신 다른 효과 메서드를 사용할 수 있다. .hide(), .slideUp() .animate()
나중에 실행될 수록 늦게 감춰지므로 다른 자바스크립트 코드 밑에 삽입한다.
※ jQuery의 .ready() 메서드는 DOM이 로드되고 이미지가 로드되기 직전에 실행된다.
자바스크립트의 onload 등을 사용하면 이미지까지 모두 불러와야 실행된다.
위 소스코드는 자바스크립트를 사용할 수 없는 환경에서는 로딩 메시지가 항상 떠있게 된다.
이 때는 style 속성에 display:none;을 추가하고 문서 상단에 자바스크립트로 보이도록 해야 한다.
반응형
