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
Post a Comment