jQuery div寬度動畫不會流暢動畫

這個想法是，藍條會在懸停的文字上生長，文字會改變顏色。我有基本的元素，但由於某些原因，酒吧的表現非常糟糕，不會保持原樣。這似乎是浮動的結果，但我看不到如何讓寬度向左增長。

這裏是我的jQuery代碼

$(document).ready(function(e) { 
$('.work_link').hover(
function() { 
    $('.work_link').stop(true,false).animate({color:'#ffffff'}, 500); 
     $('#splash_bar_mono').stop(true, false).animate({width:'350px'}, 500).css({'float':'right'}); 
     //mouseover 
}, 
function() { 
$('.work_link').stop(true, false).animate({color:'#000'}, 500); 
$('#splash_bar_mono').stop(true, false).animate({width:'10px'}, 500);//mouseout 
}); 
$('.play_link').hover(
function() { 
    $('.play_link').stop(true, false).animate({color:'#ffffff'}, 500); 
    $('#splash_bar_mono').animate({width:'325px'}, 500).css({'float':'left'});//mouseover 
}, 
function() { 
    $('.play_link').stop(true, false).animate({color:'#000'}, 500);//mouseout 
    $('#splash_bar_mono').stop(true, false).animate({width:'10px'}, 500); 
}); 
});

下面是網站的HTML

<body id="splash"> 
<div id="splash_center"> 
     <div style="z-index:200;" id="splash_work"><a style="z-index:200;" class="work_link" href="#">WORK</a></div> 
     <div style="z-index:200;"id="splash_play"><a style="z-index:200;" class="play_link" href="#">PLAY</a></div> 
    <div id="splash_bars"> 
     <div style="z-index:-200;" id="splash_bar_mono"></div>   
    </div> 

</div> 
    <div id="splash_graphic"></div> 


</body>  
</html>

http://fefifofilms.com/

來源

2012-05-18 ScottyC