jQuery main slide

CSS @charset "utf-8"; /* CSS Document */ *{margin:0; padding:0;} ul, li{list-style:none;} img{border:0; vertical-align:top;} .main{position:relative; width:1000px; height:420px; overflow: hidden} .main .gallery{position:relative; left:0; top:0; width:5000px; height:380px; overflow:hidden;} .main .gallery ul li{float:left;} .main .gallery_text{position: absolute; top: 150px; width: 100%; } .main ..

2021.12.13

jQuery 네비게이션1

CSS @charset "utf-8"; /* CSS Document */ /* base */ *{margin:0;padding:0} body{font-size:16px; color:#333} ul, ol{list-style:none;} a{color:inherit; text-decoration:none} .hidden{display: block; position: absolute; left: -1000%; width: 1px; height: 1px; overflow: hidden; color: #fff} .dropdownmenu{width:670px; height:50px; margin:50px auto 0; padding:50px; border:1px solid #ddd;} .dropdownmenu::..

2021.12.09

jQuery animate rotate (feat.CSS)

animate rotate jQuery는 rotate 속성을 기본으로 제공하진 않지만, jQUeryRotate를 연결시켜 사용할 수 있다. 또는 CSS transition과 함께 사용할 수 있다. (class 추가, 제거) jQueryRotate 사용 파일을 추가로 링크시켜야 하기 때문에 CSS transition과 함께 사용하는것이 좋다. CSS transition과 함께 사용하는것이 좋다. addClass(), removeClass()를 사용해준다. 단락요소 입니다.

2021.12.08

jQuery animate caption

, this .clearQueue(); CSS /* CSS Document */ *{margin:0; padding:0} /* boxgrid Jquery*/ .boxgrid{width: 287px; height: 125px; overflow: hidden; position: relative; margin:20px} .boxgrid img{position: absolute; top: 0; left: 0; border: 0;} .boxgrid dt{padding:5px 10px; color:#fff; font-weight:bold;font-family:arial; font-size:0.923em} .boxgrid dd{padding:10px 0 0 10px;color:#fff;font-size:0.846em..

2021.12.08

jQuery animate hover slide

CSS transition으로도 구현할 수 있지만, jQuery로 구현하면 easing효과도 사용할 수 있다. stop() ＊ animate의 계산을 멈춰준다. ＊ animate hover효과 시 stop() 메소드를 꼭 써줘야 한다. ＊ stop을 써주지 않으면 마우스 hover한 횟수 만큼 animate가 멈추지 않고 실행된다. ＊ 또는 clearQueue를 사용해준다. (이게 더 좋음) clearQueue(); ＊ animate의 계산을 취소/삭제 한다. ＊ stop은 단순히 멈추게 해주는것이고, clearQueue는 큐(저장공간)를 삭제시켜준다. (훨씬 좋다) 예제 :)

2021.12.08

jQuery ex animate

HTML, CSS로 애니메이션의 전 상황을 만들어 준 후, jQuery로 애니메이션을 만들어준다. fadeTo(); 투명도 애니메이션 메소드 $('선택자').fadeTo('slow', 1); $('.text1').fadeTo('slow', 1); delay(); 애니메이션 딜레이(시간차)를 만들어 준다 $('선택자').delay(시간).animate(object, speed); $('.ani').delay(1000).animate({top: 4}, 'slow'); 예제 :) JUSTICE FOR ALL

2021.12.08