切换div左右移动

Question

this is my first question on this website! :) I am working on a website for a restaurant. The problem is that the following part of my code is malfunctioning. When clicked on the button, #menu expands towards right and stops after width=225px. But when I click the same button again, #menu contracts (width=50) and again expands (width=225)! Please help!

$("#menu").toggle(

     function(){
           $("#menu").animate({width:225},"slow");
    },
    function(){
           $("#menu").animate({width:50},"slow");
    });
        });
});

---

<!--following is the code for menu-->
<div id="menu" style="position:absolute; width:50; 

opacity:.4; height:75%; background-color:#000000; left:80%; top:20%;">
<button>Cart</button>
</div>

Answer 1

I think that jquery is having trouble with the integers use a string with px in it

$('#menu').toggle('click', function(){
    $(this).animate({width:'225px'},500);
},function(){
    $(this).animate({width:'50px'},500);
});