Animation problem

Animation problem

Ok I'm having an issue making a horizontal accordion animation. Here's the page that I'm working with: http://sethbaur.com/accordian/. When you click the colored bars to activate the animation, the image disappears for the duration of the animation. I do not want it to disappear. Any ideas?

Javascript:
$(document).ready(function(){
       lastBlock = $("#slide1");
       maxWidth = 621;
       minWidth = 35;   

       $(".slide").click(
         function(){
           $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
         $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
         lastBlock = this;
         }
       );
   });


HTML:
<ul id="accord">
     <li class="slide" id="slide1">
        <img src="images/greenBar1.png" style="float:left;" />
        <div id="one">
               <p>hi</p>
        </div>
     </li>
     <li class="slide">
         <img src="images/greenBar2.png" style="float:left;" />
          <div id="two">
               <p>hi</p>
         </div>
     </li>
     <li class="slide">
        <img src="images/redBar.png" style="float:left;"/>
         <div id="three">
               <p>hi</p>
        </div>
     </li>
   </ul>


CSS:
#accord {
     margin:0;
     padding:5px;
   border:1px white solid;
     width:691px;
   height:356px;
   overflow:hidden;
}

.slide {
     display:block;
   float:left;
     overflow:hidden;
     height:356px;
     width:35px;
     margin:0;
     padding:0;
}

.slide img {
   padding:0;
   margin:0;
   border:0;
}

#slide1 {
     width:621px;
}

#one {
   float:left;
   height:356px;
   width:586px;
   background-image:url('images/1.jpg');
}

#two {
   float:left;
   height:356px;
   width:586px;
   background-image:url('images/2.jpg');
}

#three {
   float:left;
   height:356px;
   width:586px;
   background-image:url('images/3.jpg');
}