オンマウスで画像を横回転風にアニメーション（無限回転）

画像をオンマウスでずっと横回転風にアニメーションする。

<p>例として、画像は79px × 79pxサイズのもの。裏と表の二枚を用意。</p>

// html
<div id="item01" class="item">
  <a href="" class="">
    <span class="img_box">
      <img class="back" src="back.png" alt="" style="width: 0; margin-left: 39.5px;">
      <img class="front" src="front.png" alt="">
    </span>
  </a>
</div>

// css
.item {
	float: left;					
	width: 20%;
	margin: 12px 0 6px;
}
.item a {
	display: block;
	text-align: center;
}
.item a .img_box {
	width: 79px;
	height: 79px;
	position: relative;
	display: inline-block;
}
.item a .img_box img {
	position: absolute;
	left: 0;
	height: 79px;
}

// javascript
var rote = null; // 後で停止できるようIDを保存
var item_id = null; // オンマウスしている画像の保存
var count = 0; // 回転のフラグ用として

$(".item").hover(function() {
	item_id = $(this).attr("id");
	// 回転開始
	item_rote(item_id);
}, function() {
	// 回転ストップ
	item_stop()
});
// 回転の処理
function item_rote(item_id) {
	var flag = $('#'+item_id+' a').attr("class");
	if(flag == "" || flag == "reverse") {
		rote_front(item_id);	
	} else {
		rote_back(item_id);	
	}
	
	rote = setTimeout(function() {
        item_rote(item_id);
    }, 1000);
}
// 回転停止
function item_stop() {
	clearTimeout(rote);
	var flag = $('#'+item_id+' a').attr("class");
	if(flag == "" || flag == "reverse") {
		rote_back(item_id);	
	}
    $('#'+item_id+' a').attr("class", "");
}
// 表から裏
function rote_front(item_id) {
	// 表面の非表示
    $('#'+item_id+' .front').animate({
        width: 0,
        marginLeft: "39.5px"
    }, '500');
    // 裏面の表示
    $('#'+item_id+' .back').delay('500').animate({
        width: "79px",
        marginLeft: '0'
    }, '500');
    $('#'+item_id+' a').attr("class", "obverse");
}
// 裏から表
function rote_back(item_id) {
	// 裏面の非表示
    $('#'+item_id+' .back').animate({
        width: 0,
        marginLeft: "39.5px"
    }, '500');
    // 表面の表示
    $('#'+item_id+' .front').delay('500').animate({
        width: "79px",
        marginLeft: '0'
    }, '500');
    $('#'+item_id+' a').attr("class", "reverse");
}