jquery slideToggle Position

Question

Ich habe ein Menü div die Menüliste innerhalb

// here is the javascript/jquery 
 

 
$('#menu-tab').click(function(){ 
 
    $("#menu").slideToggle("normal"); 
 
});

/* for the css */ 
 

 
    #menu { 
 
     width: 220px; 
 
     border: 2px solid #004990; 
 
     float: right; 
 
     margin-right: 15px; 
 
     margin-top: -52px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
    <!--menu--> 
 
\t \t <a href="#"><div id="menu-tab">Menu</div></a> 
 
\t \t <div id="menu"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">a</a></li> 
 
\t \t \t \t <li><a href="#">b</a></li> 
 
\t \t \t \t <li><a href="#">c</li> 
 
\t \t \t </ul> 
 
\t \t </div>

becuase margin-top zu setzen: -52px, (die ich die Menüposition in der Seite zu steuern), Jedes Mal, wenn ich auf die Menü-Registerkarte klicke, wird das #menu von -52px verschoben. Wie kann ich es von 0px gleiten lassen?

Answer 1

Haben Sie versucht, den Stil zu ändern, bevor Sie ihn animieren? Stellen Sie den Rand des Rands direkt vor dem Verschieben auf Null.

$('#menu-tab').click(function(){ 
    $("#menu").css("margin-top","0px"); //this should set your menudiv to margin-top:0px 
    $("#menu").slideToggle("normal"); 
});