When I click on “Show Menu” button, text runs out from the left, that is working as expected.
Then I write function() { $(this).next('#menu').animate({'margin-left': '-50'}) to get the text runs back to left and disappear when “Show Menu” button is clicked again, but somehow it doesn’t work!
Thanks for your help!
$(function() {
$('button').click(function() {
$(this).next('#menu').animate({'margin-left': '25'}).animate({'margin-left': '0'},
function() {
$(this).next('#menu').animate({'margin-left': '-50'})
})
})
})#menu {
font-weight: 700;
margin-left: -50%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button>Show Menu</button>
<div id="menu">
Lorem ipsum dolor sit amet
</div>
You can use toggleClass to keep track of the visibility and add a transition to it.
$("button").click(function() {
$("#menu").toggleClass("visible");
});#menu {
font-weight: 700;
margin-left: -50%;
transition: margin-left 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#menu.visible {
margin-left: 0%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button>Show Menu</button>
<div id="menu">
Lorem ipsum dolor sit amet
</div>1