animating 'left' setting for a show-hide thingie...

animating 'left' setting for a show-hide thingie...


don't get why this is not working...

  1. //    default 'left' setting set at -200px in CSS... tried setting in JS for testing, doesn't work...   
  2. //    $('#main_nav').css('left',-200);
  3.     mainNav_pos = $('#main_nav').css('left');
  4.     console.log('mainNav_pos -- ' + mainNav_pos + ' -- initial');
  5.    
  6.     $('a#bars').click(function(e) {
  7.         e.preventDefault();
  8.         console.log(mainNav_pos);
  9.         if (mainNav_pos < -100) {
  10.             console.log('hidden');
  11.             $('#main_nav').animate( { left:1 });
  12.         }
  13.         if (mainNav_pos > 0) {
  14.             console.log(mainNav_pos);
  15.             $('#main_nav').animate( { left: -200 });
  16.         }       
  17.     });
   
in order to test whether element is visible or not, I have to test by asking whether "left" setting is greater-than or less-than a certain numerical value, since, viewing test stmts in console, sometimes if you set at, say -200, browser sets it at something like -198.8...

stmts like  if (mainNav_pos > 0)  don't work (are ignored...)  how can I make this work?

would appreciate some help...

thank you....