Emergence of the animated Div

0

I have a Div, I'm building a Custom Menu, in the Responsive style. I'd like to make her come up with an animation, coming from the Left. The Div contains the Menu links and a button to close in. Look at the code I have so far:

<script type="text/javascript" src="http://hugovales.esy.es/jquery/jquery-1.9.1.js"></script><scripttype="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><divclass="open-menu">Open Menu</div>

This menu can be viewed here, on my site.

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

What I want is for it to come up with an animation from the left side. Can you make this Div (mymenu) appear like this? (Be it with CSS or some Script)

Thank you to anyone who is willing to respond. Help Very Much!

    
asked by anonymous 23.05.2015 / 04:02

2 answers

1

Use the Transition property:

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

2s is as many seconds as the animation will last. You can also specify the transition for a specific property:

transition: margin 2s;
    
23.05.2015 / 04:15
0

To animate the menu at the time the click event is triggered, you can use the .animate method of jQuery.

To learn more, I recommend that you view the documentation: link

    
24.05.2015 / 02:29