jQuery 에니메이션 2

jQuery를 이용한 메인이미지 변경 효과 - animate, fade효과

jQuery 를 이용해서 메인 이미지의 페이드 효과를 주면서 변경해보는 효과를 만들어 보았습니다. ul li 형식에 각 li 에는 클래스 이름으로 지정되어있고 그 클래스에 배경이미지로 잡혀있는 경우입니다. 우선 html 소스코드를 보면은 메인이미지 위와 같습니다. 보시는 것과 같이 각 li 에 클래스 이름이 있고 mainimgview라는 이름과 넘버로 이루어져 있습니다. 그럼 위의 클래스는 스타일시트 즉 css 에 어떻게 적용이 되어있는가를 보면 아래와 같습니다. #mainimg { position:absolute;left:0;top:147px; width:100%; height:727px; z-index:99; } #mainimg .mainimgview01 { position:relative; floa..

IT News/jQuery 2012.12.23

jQuery animation (스크립트 에니메이션) 효과 주기

jQuery 를 이용하여 animation (에니메이션) 효과를 주는 것은 jQuery 의 장점이라고 해야할까요? 아무튼 jQuery 는 기존의 자바스크립트를 이용하면 간단한 효과를 주더라도 코드가 길어지고 복잡해집니다. 그런데 이러한 스크립트 코드의 난해함과 복잡함을 싹 없애주는 jQuery 가 개인적으로 저는 더 좋습니다. 물론 javascript 를 사용안할 수는 없지만요. 아무튼 에니메이션 효과를 주고자 jQuery 를 이용해 보았습니다. 우선 기본적인 사용 방법은 아래와 같습니다. 아래의 내용은 http://api.jquery.com/animate/ 에 있는 내용 입니다. Basic Usage To animate any element, such as a simple image: (예제 이미를 에..

IT News/jQuery 2012.05.22