Emergence of the excited Div

Question

I have a Div, I am building a Custom Menu, in the Responsive style. I’d like to make her come up with an animated one, coming from the left side. Div contains the Menu links and a close button inside. Look at the code I’ve got so far:

<script type="text/javascript" src="http://hugovales.esy.es/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
		$('.open-menu').click(function(e){
			e.preventDefault();
			var url = $(this).attr('href')
			$('#menu').fadeIn(500);	
		});
		
		
		$('#menu, .close-menu').click(function(e){
			if( e.target !== this ) 
       			return;
			$('#menu').fadeOut(500);	
		});
		
		
		
    });
</script>

<div id="menu" style="background-color: rgba(0, 0, 0, 0.9); position:fixed; top:0; left:0; width:100%; height:100%; display:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
<div id="mymenu" style="background-color: #fff; height: 100%; width: 20%; position: fixed; left: 0pt; top: 0pt; box-shadow: 10px -9px 3px rgba(0, 0, 0, 0.24);"><img class="close-menu" style="margin-left: 220px; margin-top: 10px;" src="http://hugovales.esy.es/css-alternative/bb083d7b27e4e2fd8e7f50c623582d10_30x40.png"></div></div>
<div class="open-menu">Open Menu</div>

This menu can be seen here, on my website.

You can see the text "Open Menu" there (In Header, Near Facebook Icon)

What I want is for him to come up with an animation, on the left side. Is there any way to make this Div (mymenu) appear like this? (Either with CSS or some Script)

Thank you to those who are willing to respond. Very Helpful!

Answer 1

Use the property Transition:

<div id="mymenu" style="transition: 2s ...">

2s is the amount of seconds that will last the animation. You can also specify Transition for a specific property:

transition: margin 2s;

Answer 2

To animate the menu the moment the click event is triggered, you can use the method .animate jQuery.

To learn more I recommend that you see the documentation: http://api.jquery.com/animate/