jQuery에서 "body"태그에 애니메이션을 적용하면 아무 것도 작동하지 않습니다.

Question

내 사이트의 탐색 바에있는 버튼 중 하나가 사이트에 대해 알려주는 작은 회색 탭을 아래로 내립니다.

var aboutMenu = function(){ 

    $(".aboutButton").click(function(){ 

     $("body").animate({top: "42px"}, 200); 
     $(".about").animate({top: "0px"}, 200); 

    }); 

} 

$(document).ready(aboutMenu); 

아이디어는 모든 내용과 함께 내 웹 사이트의 몸이, 42 개 픽셀 아래로 이동한다는 것입니다 : 여기에 내가 애니메이션을 위해 사용하고 코드입니다. 이것은 "about"클래스의 내용이 화면에서 볼 수 있도록 아래로 이동하는 동안입니다. '정보'버튼을 클릭하면 회색 탭이 아래로 움직이지만 본체는 그대로 유지됩니다. 탭이 나머지 탐색 표시 줄을 가린다는 점을 제외하고는 일반적으로 문제가되지 않습니다.

HTML :

<div class = "about"> 

    <p align = "center">placeholder text</p> 

</div> 

과 실제 링크 :

<li> <a class = "aboutButton">About this website</a></li> 

CSS :

.about{ 
    background-color: gray; 
    top: -42px; 
    height: 42px; 
    position: fixed; 
} 

.about p{ 
    color: white; 
} 

.aboutButton{ 
    cursor: pointer; 
} 

다음

는 (필요한 경우) 좀 더 관련 코드

Answer 1

내 의견에서 언급 한 것처럼 top (또는 그와 관련하여 다른 위치)에 애니메이션을 적용하려면 position: ... (예 : position: relative;.