jquery animate behaving differently in IE

Question

This animation runs fine in Firefox, but in IE it runs the first part of the animation the first time you hover over the div and the second part of the animation the second time you hover. I need it all to run at the same time.

Any ideas?

$(document).ready(function() {

$("#test1").hover(

    function() {
        $(this).animate({
            width: "599px",
            left: "0px",
            height: "168px",
            //backgroundColor: "#d7df23",
            opacity: 0.95,
            borderWidth: "0px"
        }, 100).css("z-index", "10");
        $(this).find(".thumb").animate({
            width: "150px",
            height: "150px",
            marginTop: "8px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "12px",
           borderColor: "#FFF"
        }, 100).attr('src','images/home/animatedMenu/brochureRequestIMG.jpg');

    }, function() {

});

});

Answer 1

got the answer...

$(document).ready(function() {

$("#test1").hover(

    function() {
        $(this).animate({
            width: "599px",
            left: "0px",
            height: "168px",
            opacity: 0.95
        }, 100).css("z-index", "10");
        $(this).find(".thumb").animate({
            width: "150px",
            height: "150px",
            marginTop: "8px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "12px"
        }, 100).attr('src','images/home/animatedMenu/brochureRequestIMG.jpg');

    }, function() {

});

});

Problem was with the border styles... they break it in IE.