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

You can float the .bandeau divs so that they aren't affecting the inline layout flow, effectively limiting their scope to the parent 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 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);

Answer 3

One option would be to animate the opacity either to 1 or to 0 instead of using fadeIn and fadeOut:

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

and

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

Here's a working fiddle to demonstrate this approach.

A few other notes about the code...

First, your hover-in and hover-out functions are nearly identical. Any time you have that much code that is so similar, it's a very good idea to combine it into a single function.

Where you have this code:

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

it's unnecessary to have the new Array, since you are just replacing the value in the next line. Also, I recommend using a plural name for an array instead of a singular name:

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

The next line is:

for (var i in id) {

Never use a 'for..in' loop on an array. It will bite you if anyone ever augments Array.prototype with new methods or properties. Instead, use a numeric for loop or an iterator such as jQuery's $.each().

Next is this code:

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

When you use .match to test a string like this, you can also use it to extract the part of the string you want, without resorting to a brittle-to-maintain .substring(15) call:

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

Now having said all this, why not simplify things much further and let jQuery do all the work for you? There's no need for any of this fancy array looping and checking of classnames. You can replace the entire JavaScript code with this:

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

Updated fiddle

(You may note that I've contradicted my first piece of advice here and didn't combine the bit of duplicate code in the hover-in and hover-out functions. But there's now so little code that that the duplication isn't worth worrying about.)

Answer 4

Try using z-index in your CSS to stack your divs on top of each other