Why are "fadeIn" and "fadeOut" functions moving my divs?

Question

I'm starting a new website and I'm using JQuery for display a div inside another (a title). I have 4 divs displayed inline-block and my result need to be like this :

I'm using Jquery for display the div containing "Accueil" with the function fadeIn and fadeOut but my problem is the following : When the move is over a div, the hidden div is animated and fade in like desired but the other div (on the right) is moving down ! My html is the following :

The left box : 
    <div class="box-interactive box-interactive1">
      <div class="contenu-box">
          titi 1
      </div>
      <div id="bandeau1" class="bandeau">
          rr
      </div>
   </div>
The right box : 
   <div class="box-interactive box-interactive2">
      <div class="contenu-box">
          titi 2
      </div>
      <div id="bandeau2" class="bandeau" style="display : block;">
          accueil 2
      </div> 
    </div>

My css :

/*CSS for boxes and interactive text*/
.box-interactive {
    width: 300px;
    height: 200px;
    background-color: red;
    margin: 20px;
    display: inline-block;
    size: fixed;
}

.contenu-box{
    width: 300px;
    height: 160px;
}

.bandeau {
    width: 300px;
    height: 40px;
    background-image: url("../../img/Alex/accueil.png");
    background-size: auto 100%;
    position: relative;
    display: none;
}

And my JS :

$(function(){ 
  $("div[class^='box-interactive']").hover(
      function(){
      var id = new Array;
      id = $(this).attr('class').split(' ');
      for (var i in id) {
        if(id[i].match('box-interactive.+')){
        var idnum = 'bandeau'+id[i].substring(15);
        $("#"+idnum+"").fadeIn(800);
        }
      }   
      },
      function(){
    var id = new Array;
      id = $(this).attr('class').split(' ');
      for (var i in id) {
        if(id[i].match('box-interactive.+')){
        var idnum = 'bandeau'+id[i].substring(15);
        $("#"+idnum+"").fadeOut(500);
        }
      }

      }
  );
});

The second div (it works in both ways) is moving down with specificities : the top of the moving div is equal to the bottom of the first div (the one befor the hidden). Do you have an explaination ?

Fiddle : http://jsfiddle.net/Msh2T/1/ open large the right window to see the problem ;) thx

Answer 1

fadeIn and fadeOut will set an element to "display: none" once the animation completes, removing it from the layout. If you don't want the animation to affect the layout, animate the opacity.

$("#"+idnum+"").animate({opacity: 0}, 800);
...
$("#"+idnum+"").animate({opacity: 1}, 800);