[webmanss]

Всем привет, есть небольшой код:

<div id="block1">
  <div id="in_block_1">test</div>
</div>
 
<div id="block2">
  <div id="in_block_2">ok</div>
</div>

<style>#block1 {
    pozition:relative;
    z-index-1;
    width: 200px;
    height: 100px;
    background-color:blue; 
    color:#000;
    cursor:pointer;
  }
  #block2 {
    pozition:relative;
    z-index-1;
    width: 200px;
    height: 100px;
    background-color:green; 
    color:#000;
    cursor:pointer;
  }
 #in_block_1, #in_block_2 {
    pozition:absolute;
    z-index-2;
    display:none;
    width: 200px;
    height: 100px;
    background-color: #000;
    color:#fff
  }
  
</style>

$(function () {
  $("#block1").mouseover(function(){
       $('#in_block_1').fadeIn(300);
   });
 $("#block1").mouseout(function(){
       $('#in_block_1').fadeOut(200);
        });
});

$(function () {
  $("#block2").mouseover(function(){
       $('#in_block_2').fadeIn(300);
   });
 $("#block2").mouseout(function(){
       $('#in_block_2').fadeOut(200);
        });
});

Задача была поверх первого блока вывески (плавно) второй блок при наведении на первый. Сейчас работает, но срабатывает дважды (или большее число раз) нашел пояснение к эффектам jquery но не помогло.
Кто знает в чем причина?
И вопрос №2, как зациклить код? Т.е. если этих блоков много, как с помощью цикла оптимизировать код?