Search code examples
javascriptjqueryhtmlcssfadein

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

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 : enter image description here

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 ?

enter image description here

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

Solution

  • 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/