클릭했을 때 절대 위치의 Divbox에 애니메이션 적용

Question

나는 절대 위치 Div를 클릭하면 애니메이션을 시도합니다. 태그는 #menu 및 HTML5 태그 탐색과 함께 div입니다. nav는 다소 메뉴 상자의 래퍼입니다. 모든 것은 절대적인 입장입니다.

nav { 
    top:50%; 
    left:50%; 
    position: absolute; 
    margin-top:-31.5px; 
    margin-left:-150px; 
    height: 63px; 
    width: 300px; 
    border: 1px solid '#f2f2f2; 
    background: '#333333; top: 400px 
} 

menu1 { 
    height: 63px; 
    width: 75px; 
    float: left; 
    background-image: url(../img/1.png); 
} 

JQuery와는 다음과 같습니다 :

$('#menu1').click(function() { 
    $('nav').animate({ 
     top: '+=50px', 
    }, 
    5000, 
    function() { 

    }); 
}); 

하지만 그 작동하지

이

는 CSS 코드입니다. "# menu1"을 클릭하면 네비게이션이 래퍼 상단으로 이동합니다. 그게 가능하니? 인사말

Answer 1

귀하의 MENU1입니다 id="menu1"와 요소가 아닌 <menu1> 한, CSS의 해시 누락 :

#menu1 { 
    height: 63px; 
    width: 75px; 
    float: left; 
    background-image: url(../img/1.png); 
} 

Answer 2

모르겠어요 당신이 놓친 또는 거기, 둘 다의 여부 틀린 경우

ID가 #이어야하거나 클래스 인 경우 점 "."이 있어야합니다.

귀하의 jquery에도 #이 없습니다.

change this $('nav') to $('#nav') 

$('#nav').animate({ 
     top: '+=50px', 
    }, 
    5000, 
    function() { 

    }); 



    #nav { 
     top:50%; 
     left:50%; 
     position: absolute; 
     margin-top:-31.5px; 
     margin-left:-150px; 
     height: 63px; 
     width: 300px; 
     border: 1px solid '#f2f2f2; 
     background: '#333333; top: 400px 
    } 

    #menu1 { 
     height: 63px; 
     width: 75px; 
     float: left; 
     background-image: url(../img/1.png); 
    }