jquery .animate() issue regarding animating css properties left and width

first of all, sorry for my bad english (if so), as I am not a native speaker.

Currently I am working on an accordion slider, similar to this one: http://www.scriptocean.com/accordion.html The issue with this specific slider was a bad display output in IE7.

Therefore I decided to write my own lightweight slider using .animate(). Should not be much of a problem I thought. Though everything works fine in FF, IE7&IE8 do not like me or my code.

.css() works in IE8 (not IE7) .animate() works in neither one of them.

Here comes my jquery-code:

$(document).ready(function(){

var th1 = '#home_slider div#slidimg_1';
var th2 = '#home_slider div#slidimg_2';
var th3 = '#home_slider div#slidimg_3';
var th4 = '#home_slider div#slidimg_4';
var th5 = '#home_slider div#slidimg_5';

var a1 = '#home_slider div#slidbg_1 a';
var a2 = '#home_slider div#slidbg_2 a';
var a3 = '#home_slider div#slidbg_3 a';
var a4 = '#home_slider div#slidbg_4 a';
var a5 = '#home_slider div#slidbg_5 a';

var i = 0;

    $(th1).hover(function(){
            $('.slidtxt#slidtxt_1').css('display','block');
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'524px'}, 500);
            $(th2).stop().animate({'left':'524px'}, 500);
            $(a2).stop().animate({'width':'87px'}, 500);
            $(th3).stop().animate({'left':'611px'}, 500);
            $(a3).stop().animate({'width':'87px'}, 500);
            $(th4).stop().animate({'left':'695px'}, 500);
            $(a4).stop().animate({'width':'87px'}, 500);
            $(th5).stop().animate({'left':'782px'}, 500);
            $(a5).stop().animate({'width':'100px'}, 500);
        }, function(){
            $('.slidtxt#slidtxt_1').css('display','none');
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'174px'}, 500);
            $(th2).stop().animate({'left':'174px'}, 500);
            $(a2).stop().animate({'width':'174px'}, 500);
            $(th3).stop().animate({'left':'348px'}, 500);
            $(a3).stop().animate({'width':'174px'}, 500);
            $(th4).stop().animate({'left':'522px'}, 500);
            $(a4).stop().animate({'width':'174px'}, 500);
            $(th5).stop().animate({'left':'696px'}, 500);
            $(a5).stop().animate({'width':'178px'}, 500);
    });
    $(th2).hover(function(){
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'87px'}, 500);
            $(th2).stop().animate({'left':'87px'}, 500);
            $(a2).stop().animate({'width':'524px'}, 500);
            $(th3).stop().animate({'left':'611px'}, 500);
            $(a3).stop().animate({'width':'87px'}, 500);
            $(th4).stop().animate({'left':'695px'}, 500);
            $(a4).stop().animate({'width':'87px'}, 500);
            $(th5).stop().animate({'left':'782px'}, 500);
            $(a5).stop().animate({'width':'100px'}, 500);
        }, function(){
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'174px'}, 500);
            $(th2).stop().animate({'left':'174px'}, 500);
            $(a2).stop().animate({'width':'174px'}, 500);
            $(th3).stop().animate({'left':'348px'}, 500);
            $(a3).stop().animate({'width':'174px'}, 500);
            $(th4).stop().animate({'left':'522px'}, 500);
            $(a4).stop().animate({'width':'174px'}, 500);
            $(th5).stop().animate({'left':'696px'}, 500);
            $(a5).stop().animate({'width':'178px'}, 500);
    });
    //... here follow 3 more blocks ( th3 - th5 .hover()), but i thought i wont bother you with those ;-)

It is working in FF as said already, not in IE.. For better issue evalution here comes the HTML and CSS as well:

<div id="home_slider">
        <div id="slidimg_1" style="background:#666;position:absolute;>
                <a href="/index.php?id=53">
                    <img src="images/bild1_wohngebiete.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_1" style="display: none;"><h2>Wohngebiete</h2></span>
                </a>    
        </div>
        <div id="slidimg_2" style="background:#666;position:absolute;left:175px;padding-left:1px;">
                <a开发者_运维知识库 href="/index.php?id=28">
                    <img src="images/bild2_wohnungsangebote.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_2" style="display: none;"><h2>Wohnungsangebote</h2></span>
                </a>
        </div>
        <div id="slidimg_3" style="background:#666;width:174px;position:absolute;left:350px;padding-left:1px;">
                <a href="/index.php?id=29">
                    <img src="images/bild3_mietplus_angebote.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_3" style="display: none;"><h2>Mietplus Angebote</h2></span>
                </a>
        </div>
        <div id="slidimg_4" style="background:#666;width:174px;position:absolute;left:525px;padding-left:1px;">
                <a href="/index.php?id=30">
                    <img src="images/bild4_wir_stellen_uns_vor.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_4" style="display: none;"><h2>Wir stellen uns vor</h2></span>
                </a>
        </div>
        <div id="slidimg_5" style="background:#666;width:174px;position:absolute;left:700px;padding-left:1px;">
                <a href="/index.php?id=31" class="last-child">
                    <img src="images/bild5_mitgliedschaft.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_5" style="display: none;"><h2>Mitgliedschaft</h2></span>
                </a>
        </div>
    </div>

// CSS part: taken directly from external css-file!

    #home_slider{
    position: relative;
    overflow: hidden;
    background: #666;
    height: 577px;
    width: 874px;
    display: inline-block;
 }
 #home_slider span.slidtxt{
    position: absolute;
    bottom: 40px;
    background: #ffe200;
    width: 524px;
    height: 50px;
    text-align: center;
 }
 #home_slider span.slidtxt h2{
    font-family: Verdana;
    font-size: 13pt;
    color: #666;
 }

Hopefully you have some ideas. I am about to run angry because of this problem.

Looking forward to your response :)

Kind regards.

Eek! Please go here and use this: http://docs.jquery.com/UI/Accordion