Question

I am trying to create an animate sliding navigation menu, where the submenu slides out using an animation toggle for the ‘left’ attribute.

I have successfully managed to get the left attribute to toggle between the initial setting of -360px, where the div is hidden and the 0 attribute where it is expanded out, but when the left attribute toggles to 0, it also adds display:none.

I think there should be a fairly simple solution but as yet I have not been able to find it

Here is the page where it is implemented

And here is the Jquery function:

http://alexpeake.info/index

$(document).ready(function(){
  $("#gallerytoggle").click(function(){
    $("#travelling_info").animate({left:'toggle'},"slow");
  });

})

Answer 1

You could do it manually. Not sure if it’s optimal, but it’s my naive way of doing it:

var state = 1;

$(document).ready(function(){
  $("#gallerytoggle").click(function(){
    $("#travelling_info").animate({left: parseInt((state % 2 - 1) * (-360)) + 'px'}, "slow");
    state++;
  });    
});