JS 확장 구역의 위치 지정

헤더 이미지의 맨 아래에있는 일련의 div로 구성된 메뉴가 있습니다.이 메뉴는 마우스를 올리면 지정된 높이까지 확장되도록 설계되었습니다.JS 확장 구역의 위치 지정

JSFiddle 나는 거의 원하는대로 수행하지만 어떤 이유 때문에 div가 커서가 위에있을 때 컨테이너 상단으로 점프하고 있습니다. JS (또는 아마도 CSS)에서 동작을 일으키는 부분이 무엇인지 궁금합니다. 원하는 효과를 보여주는 데 도움이되는 이미지도 포함 시켰습니다.

은 언제나, 어떤 도움을 크게 감사합니다!

출처

2012-09-06 Marcatectura

bottom: 0px이 CSS에 이미 정의되었으므로 애니메이션 할 때 top 속성을 정의 할 필요가 없습니다. height을 다시 정의하면 예상대로 작동합니다. http://jsfiddle.net/DbTyX/20/이

$("#pagebuttonhome").hover(function() { 
    $("#pagebuttonhome").animate({'height': '80px'}); 
}, function() { 
    $("#pagebuttonhome").animate({'height': '30px'}); 
});

그냥 최적화를 위해 당신은 또한 this 키워드를 사용할 수 있습니다 : 여기에 대한 예는

$("#pagebuttonhome").hover(function() { 
    $(this).animate({'height': '80px'}); 
}, function() { 
    $(this).animate({'height': '30px'}); 
});

출처

2012-09-06 03:09:40

에반, 나는 CSS를 조정 조금 (추가 오버 플로우 : 숨겨진) 그래서 스크롤 div가 무너 졌을 때 나타나지 않고 솔루션이 완벽하게 작동했습니다. 조정 된 JSfiddle은 다음과 같습니다. http://jsfiddle.net/YYG7j/4/ – Marcatectura

당신의 JSFiddle 보면, 난 당신뿐만 아니라 상단 속성을 애니메이션을하는 이유 나는 그없이 코드를 볼 모르겠어요 : 예상대로

$("#pagebuttonhome").hover(function() { 
    $("#pagebuttonhome").animate({'height': '80px'}); 
}, function() { 
    $("#pagebuttonhome").animate({'height': '30px'}); 
});

내가 일을 생각합니다.

이것은 당신이 솔루션에 관심이 있다면 알려주세요 (전환에) 혼자 CSS를 사용하여도 accomplishable입니다

주 : 유일한 해결책 전환을 지원하지 않는 브라우저와 호환되지 않는 CSS

출처

2012-09-06 03:04:15

를 설정하면 요소의 positionabsolute에 다음 그 값은 원점 (0,0)을 기준으로 해석하는 top 또는 left 값을 설정합니다. here과 같이 marginTop/marginLeft을 대신 사용하십시오.

출처

2012-09-06 03:07:46 chucktator

JS 확장 구역의 위치 지정

답변

관련 문제