JQuery .animate() only works in Chrome

Question

I am using the JQuery .animate() function to slide divs in a container div. This works without issue in Google Chrome, but when I try in either Firefox or IE, the divs become a garbled mess and don't actually slide. I'm new to Javascript and ignorant in the ways of browser compatibility, can anyone point me in the right direction? Here is the relevant code:

The HTML

<div id="slider">
  <div id="main" class="content">
  </div>

  <div id="projects" class="content">
  </div>

  <div id="about" class="content">
  </div>

  <div id="contact" class="content">
  </div>
</div>

The CSS

#slider {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

#main {
  background-color: red;
  width: inherit;
  height: inherit;
  position: absolute;
}

#projects {
  background-color: blue;
  width: inherit;
  height: inherit;
  position: absolute;
}

#about {
  background-color: yellow;
  width: inherit;
  height: inherit;
  position: absolute;
}

#contact {
  background-color: green;
  width: inherit;
  height: inherit;
  position: absolute;
}

.content {
  left: 0;
  top: 0;
}

The JavaScript

$(document).ready(function() {

var contentWidth = '100px';

for( var i=0; i < 2; i++) {
  $('.gallery' + (i + 1)).colorbox({ opacity:0.5 , rel:'gallery' + (i+1)});
}

$('.content').css({
  position: 'absolute',
  left: contentWidth
});

$('#main').addClass('visible');
document.getElementById('main').style.left = "0";

$("li a").click(function () {
  event.preventDefault();
  var $blockID = $( $(this).attr('href') );

  if ($blockID.hasClass('visible')) { return; }

  $('.content.visible')
    .removeClass('visible')
    .animate({ left: '-=100px' }, {  
      duration: 'slow',
      complete: function () {
        $(this).css('left', '100px');
      }
    }
 );

$blockID
  .addClass('visible')
  .animate({ left: 0 }, {duration: 'slow'});
});

});

JSFiddle: http://jsfiddle.net/bwvVZ/

I can also provide a link to the site in question, although I will hold off because I am not sure if its against the rules. Any help is much appreciated!

Answer 1

You are missing the event argument from your click handler

$("li a").click(function(){ 
    event.preventDefault();
    //...
});

It should be

$("li a").click(function (event){
    event.preventDefault();
    //...
});

DEMO .

Answer 2

Can't test in IE myself but this fixes Firefox and the returnValue should fix IE. CSSDeck Test - I can't access jsfiddle from my current location.

$("li a").click(function (event){
    event.returnValue = false; //ie
    if(event.preventDefault) //prevents error if not found
        event.preventDefault();

    var $blockID = $($(this).attr('href'));

    ...