Greetings from a newbie in the world of javascript!
I am currently experimenting with creating custom menu transitions using some basic jquery code.
The concept is to have a menu that is visible initially, and when the user clicks "close," the menu will slide off to the left and wait there. When the user clicks "open," the menu will slide back into its original position.
Unfortunately, it seems to work only for the first click and not thereafter. I would greatly appreciate it if someone could provide a brief explanation as to why this is happening, as I am eager to learn.
Here is my HTML code:
<div class="menubar" id="side">
</div>
<span class="menu close" id="close"></span>
<span class="menu open" id="open"></span>
And here is my CSS:
.menubar
{
position:absolute;
left:0;
top:0;
z-index:9;
height:100%;
width:350px;
background:blue;
display:block;
}
.menu
{
position:absolute;
left:360px;
top:15px;
z-index:9;
width:50px;
height:50px;
display:block;
opacity:1 !important;
cursor:pointer;
}
.close
{
background:red;
}
.open
{
left:10px;
display:none;
background:green;
}
And this is my Javascript:
var $ = jQuery;
$("#close").one("click", function() {
$(".menubar").animate({left: "-350px"}, 300, function (){
});
$(this).css("display", "none");
$("#open").css("display","block");
});
$("#open").one("click", function() {
$(".menubar").animate({left: "0px"}, 300, function (){
});
$(this).css("display", "none");
$("#close").fadeIn(300);
});
Check out my jsFiddle example here.
Thank you for your help!