개발자포럼 입니다.
이게 무슨 효과인지 파악이 안되네요.12
- 등록일 2015-05-06 14:02
- 조회수 779
|
||
0
추천하기
다른의견
0
|
파워링크 
등록안내
등록안내
|
 0
 0
이거안먹히네
jquery의 animate로 만든 width 를 늘려서 만든 효과 같네요.
2015-05-06
|
|
0
0
제이쿼리는 사용을 안해봤는데, 다른 방법으로 구현할 수는 없을까요??
2015-05-06
|
|
0
0
.more{ position:absolute; width:50px; height:50px; background:url('display.png'); border:0px solid #444; padding:-20px; text-align:left; overflow:hidden;border-bottom-left-radius:5em;
border-bottom-right-radius:5em; border-top-left-radius:5em; border-top-right-radius:5em; } .more span{ position:absolute; left:60px; width:160px; padding:8px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; } $(".more").hover(function(){ $(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size }, function () { $(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'}); }); 위 는 관련 CSS 와 js 마우스 오버시 안에 있는 문구를 늘어난 구역에 표시하게 되어있습니다. |
|
|
0
0
// 이게 class="more" 로 된 녀석들 마우스 오버시 작동하는 JS입니다.
$(".more").hover(function(){ // 마우스 오버시 0.2초간 width를 225px로 늘리고 완료시 z-index: 10으로 변경 $(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size }, function () { // 원복 $(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'}); }); |
|
0
0
JUbermensch
css로 ... a 태그에 width와 a:hover 의 width값 다르게 주고, transition값을 지정해주시는게 가장 빠를겁니다.
|
|
|
0
0
자르니아
|
|
|
|
 |
|
| △ 이전글▽ 다음글 | 목록보기 |
|
