Why do the fadeIn and fadeOut functions move my divs?

Question

I am starting a new site, and I am using jQuery to display a div inside another (title). I have 4 divs displayed inline-block, and my result should be like this:

I use jQuery to display a div containing "Accueil" with the fadeIn and fadeOut functions, but my problem is this: when moving over a div, the hidden div animates and disappears as I wanted, but the other div (on the right) moves down! My html is as follows:

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 directions) moves down with specific features: the upper part of the moving div is equal to the lower part of the first div (one for the hidden one). Do you have an explanation?

Fiddle: http://jsfiddle.net/Msh2T/1/ , ;)

Answer 1

div .bandeau, , div.

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

Fiddle: http://jsfiddle.net/Msh2T/3/

Answer 2

fadeIn fadeOut "display: none" , . , , .

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

Answer 3

1, 0 fadeIn fadeOut:

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

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

, .

...

-, . , , .

:

var id = new Array;
id = $(this).attr('class').split(' ');

new Array, . , :

var ids = $(this).attr('class').split(' ');

:

for (var i in id) {

"for..in" . , - Array.prototype . , jQuery $.each().

:

if(ids[i].match('box-interactive.+')){
    var idnum = 'bandeau'+id[i].substring(15);
    ...

.match , , .substring(15):

var match = ids[i].match( /box-interactive(.+)/ );
if( match ) {
    var idnum = 'bandeau' + match[1];
    ...

, , jQuery ? - . JavaScript :

$(function(){ 
    $("div[class^='box-interactive']").hover(
        function(){
            $(this).find('.bandeau').animate( { opacity:1 }, 800 );
        },
        function(){
            $(this).find('.bandeau').animate( { opacity:0 }, 500 );
        }
    );
});

​​

( , . , .)

Answer 4

z-index CSS, div