クリック時に絶対配置されたDivboxをアニメ化

Question

絶対位置付けDivをクリックしてアニメートしようとします。タグは#menuとHTML5タグのnavでdivになります。 navは、ちょっとしたメニューボックスのラッパーです。すべてがポジション絶対です。

これは、CSSのコードです：

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() { 

    }); 
}); 

しかし、その作業はありません。 "＃menu1"をクリックすると、navはラッパーの上にスライドします。それは可能ですか？ 挨拶

Answer 1

それはid="menu1"なく<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); 
    }