Ребят, помогите, не могу никак разобраться с глюком. Вот код:

<div class="item">
  <a href="product/200/">
    <img src="product200.jpg" id="pro_200" />
  </a>
  <div id="preview_block_200"></div>
</div>

Это 1 из 30 блоков с товарами

$(".item a img").hover(function(){

arr = this.id.split('_'); // arr[1] получаем id того элемента, на который навели мыщь

$.ajax({
	type: 'GET',
	dataType: 'json',
	cache: false,
	data: 'id=' + arr[1],
	url: 'ajax_get_color.php', // ответ "mass":{"1":"1.jpg","2":"2.jpg","3":" ;3.jpg"}}
	beforeSend: function()
	{
		$("#preview_block_" + arr[1]).empty();  
	},
	success: function (data)
	{
		var res;
		for(var key in data.mass)
		{
			res += '<img src="gallery/' + data.mass[key] + '" />';
		}

		$("#preview_block_" + arr[1]).append($(res)); //наполняем блок превьюшками
			
		delete data.mass;
		delete res;
	}
});
	
});

Проблема в том, что когда 30 товаров на странице и по каждой водишь мышкой, то в блоках #preview_block_ появляются картинки, то как нужно (к примеру всего 3 штуки), то по 2-3 раза повторяются, то есть такое ощущение что объект data.mass не успевает очищаться или просто работает некорректно. Например часто в одном блоке отображаются товары из соседнего, а при повторном наведении всё как нужно.

_____________
..Работает - не трогай!