文字スクロールバー

職場でCSSの勉強がてら作ったけど、陽の目をみなかったスクリプト。
単純なスクリプトだけれども、文字数がおおい場合は
枠内をスクロールして、そうでない場合は中央揃えになる。

css

<style>
.message{
 position: relative;
 width: 400px;
 height: 40px;
 background: rgba(0,0,0,0.5);
 overflow: hidden;
 padding: 0 10px;
}
.message p{
 position: absolute;
 line-height: 40px;
 display: table-cell;
 min-width: 380px;
 box-sizing: border-box;
 padding: 0;
 height: 40px;
 text-align: center;
 vertical-align: middle;
 color: white;
 margin: 0;
 white-space: nowrap;
}
</style>

js

<script>
$(function(){
 function imageMessageAnimate(){
var $im = $('.message');
var imw = $im.width();
var $imp = $('.message p');
var impw = $imp.width();
var startdelay = 3000;
var enddelay = 3000;
var refleshtime = 1000;
var animatetime = (impw-imw) * 10;
var sumtime = startdelay + enddelay + refleshtime + animatetime;
if ((impw-imw) > 0){
 $imp.delay(startdelay)
 .animate({
marginLeft: -(impw-imw)+"px",
 }, animatetime , 'linear')
 .delay(enddelay)
 .animate({
opacity: 0.0
 }, refleshtime/2.0, 'swing', function(){
$(this).css('marginLeft', 0);
 })
 .animate({
opacity: 1.0
 }, refleshtime/2.0);
 setTimeout(imageMessageAnimate, sumtime);
}
 }
 imageMessageAnimate();
});
</script>

html

<div class='message'>
 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお