jquery animate behaving differently in IE

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",
            marg开发者_运维技巧inTop: "8px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "12px",
           borderColor: "#FFF"
        }, 100).attr('src','images/home/animatedMenu/brochureRequestIMG.jpg');

    }, function() {

});

});

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.