jquery - How do I make a <div> slide back and forth on click? -


i writing design right side of mask (#face2) sliding left right , again when click on 1 of options (#menu1contact) in left menu, revealing inner content (#content).

here's code:

$('#menu1contact').on('click', function(){      $('#face2').animate({     'marginleft': '+=750px'     },2500)     $('#content').animate({     'width': '+=750px'     },2500)     $('#content').css('border-left' , 'solid #5d3f35')  }); 

but how make slide original position when click on #menu1contact again?

the following code didn't work:

$('#menu1contact').toggle(function(){      $('#face2').animate({     'marginleft': '+=750px'     },2500)     $('#content').animate({     'width': '+=750px'     },2500)     $('#content').css('border-left' , 'solid #5d3f35')},              function(){      $('#face2').animate({     'marginleft': '-=750px'     },2500)     $('#content').animate({     'width': '-=750px'     },2500)     $('#content').css('border-left' , 'solid #5d3f35')  }); 

you can add class check state:

$('#menu1contact').on('click', function(){     if ( !$(this).hasclass("opened") ) {     $('#face2').animate({     'marginleft': '+=750px'     },2500)     $('#content').animate({     'width': '+=750px'     },2500);     $('#content').css('border-left' , 'solid #5d3f35');      $(this).addclass("opened");     } else {        $('#face2').animate({     'marginleft': '-=750px'     },2500)     $('#content').animate({     'width': '-=750px'     },2500);     $('#content').css('border-left' , 'solid #5d3f35');      $(this).removeclass("opened");     } }); 

however missed semicolons @ end of rows


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -