[jQuery] Akkordeon ausfahren bei Hovern über anderem Element

[Quabbe]

Hey Leute,

ich möchte ein fünfspaltiges Akkordeon mit fünf Hover-Elementen verknüpfen. Beides habe ich auf meiner Seite bereits erfolgreich eingebunden, nur die Verknüpfung fehlt noch: http://www.vermittelmich.de/

Die einzelnen Spalten sollen ausfahren, wenn man über die entsprechenden Bilder hovert statt über die schmale "Konzept"-Grafik.

JavaScript:

$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 600;
    minWidth = 25;	


    $("#box a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:750 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:750});
	lastBlock = this;
      }
    );
});

HTML mit zwei Spalten:

<ul>
  <li>
    <a id="a1">
      <img src="img/boxed1.jpg" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="img/boxed1.jpg" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>

CSS:

#content .container #box ul{
  height: 220px;
  width: 700px;
}


#content .container #box ul li{
  float: left;
  display: block;
}


#content .container #box ul li a{
  display: block;
  overflow: hidden;
  height: 220px;
  width: 25px;
}


#content .container #box #a1{
  width:600px;
}


#content .container #box ul li img{
  position: absolute;
  height:220px;
  width:25px;
  color:blue;
}


#content .container #box ul li p{
  width:500px;
  display:block;
  margin-left:40px;
}

Kann mir jemand helfen?

edit: sorry, scheinbar kommt beim Kopieren und Einfügen meines Codes hier nur Bandsalat heraus ... :(
edit2: jetzt sollte es ansehnlich sein :)