title: animate function works in chrome but not in firefox
body: <p>I have a centered div and 4 other divs - one on each side of the centered div. When I click a button each of the div slide into the frame and push the centered div out. </p>
  
  <p>It works fine in chrome but fails using firefox, leaving me with no error from firebug.</p>
  
  <p><a href="http://www.uvm.edu/~areid/homesite/index.html" rel="nofollow">Here</a> is my implementation which doesn't currently work correctly in firefox.</p>
  
  <p>As you can see, in firefox the centered div simply disappears instead of sliding out of the screen. Using chrome, the centered div slides out as intended.</p>
  
  <p>Can someone take a look with firebug and tell me what they think might be causing the problem?</p>
  
  <p>This code was based off of a jsfiddle that works fine using either chrome or firefox.</p>
  
  <p>Here is the code to the jsfiddle:</p>
  
  <p>here is the <strong>html</strong></p>
  
  <pre><code>&lt;div id="fullContainer"&gt;
      &lt;div id="right"&gt;
  
      &lt;/div&gt;
      &lt;div id="left"&gt;
  
      &lt;/div&gt;
      &lt;div id="top"&gt;
  
      &lt;/div&gt;
      &lt;div id="bottom"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="centerContainer"&gt;
      &lt;div id="relativeContainer"&gt;
          &lt;div id="content"&gt;
              This is where your face should go.  Notice that I placed it within a centering div.  
              This will enable the face to be absolutely positioned, and allow for you to modify 
              it's position when the side-bars slide in.
              &lt;div data-move="left"&gt;Open Left&lt;/div&gt;
              &lt;div data-move="right"&gt;Open Right&lt;/div&gt;
              &lt;div data-move="top"&gt;Open Top&lt;/div&gt;
              &lt;div data-move="bottom"&gt;Open Bottom&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the <strong>css</strong></p>
  
  <pre><code>#centerContainer {
      position:fixed;
      top:50%;
      left:50%;
      width:0;
      height:0;
  }
  #relativeContainer {
      position:relative;
  }
  #fullContainer {
      position:fixed;
      width:100%;
      height:100%;
      top:0;
      left:0;
  }
  #content {
      position:absolute;
      width:300px;
      height:400px;
      top:-200px;
      left:-150px;
      background:#BADA55;
      border:1px solid #444;
      padding:10px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  #content.right {
      left:-250px;
  }
  #content.left {
      left:-50px;
  }
  #content.bottom {
      top:-300px;
  }
  #content.top {
      top:-100px;
  }
  
  #content div {
      cursor:pointer;
      color:blue;
      text-decoration:underline;
      margin-top:15px;
      text-align:center;
  }
  #left {
      position:absolute;
      top:0;
      left:-125px;
      height:100%;
      width:100px;
      background:blue;
      border:1px solid #444;
      padding:10px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #left.opened {
      left:0;
  }
  
  #right {
      position:absolute;
      top:0;
      right:-125px;
      height:100%;
      width:100px;
      background:green;
      border:1px solid #444;
      padding:10px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #right.opened {
      right:0;
  }
  
  #top {
      position:absolute;
      left:0;
      top:-125px;
      width:100%;
      height:100px;
      background:yellow;
      border:1px solid #444;
      padding:10px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #top.opened {
      top:0;
  }
  
  #bottom {
      position:absolute;
      left:0;
      bottom:-125px;
      width:100%;
      height:100px;
      background:red;
      border:1px solid #444;
      padding:10px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #bottom.opened {
      bottom:0;
  }
  </code></pre>
  
  <p>here is the <strong>javascript</strong>:</p>
  
  <pre><code>function SlideOut(element){
  
      $(".opened").removeClass("opened");
      $("#"+element).addClass("opened");
      $("#content").removeClass().addClass(element);
  
  }
  $("#content div").click(function(){
  
      var move = $(this).attr('data-move');
  
      SlideOut(move);
  
  });
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/WVPDH/2/" rel="nofollow">fiddle</a> </p>
  
  <p>Thank you</p>
  
  <p>katie</p>