fadeIn/fadeOut срабатывает дважды
 

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

<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, как зациклить код? Т.е. если этих блоков много, как с помощью цикла оптимизировать код?

Показан ведь метод stop(), который останавливает анимацию.Когда мы делаем выборку функцией $, цикл уже отрабатывает. Передаем дивы с общим классом, либо по селектору атрибута.

$(function () {
  $('div[id^="block"]')
    .mouseover(function(e) {
       $(this).children().stop().fadeIn(300);
  }).mouseout(function(e) {
       $(this).children().stop().fadeOut(200);
  });
});

с методом stop() вообще не срабатывает: https://jsfiddle.net/fuxbkepe/

webmanss,
Ты подключил слишком старую версию библиотеки.

Да) спасибо большое!