Почему функции «fadeIn» и «fadeOut» перемещают мои div?

Question

Я начинаю новый сайт, и я использую JQuery для отображения div внутри другого (заголовок). У меня 4 дивы отображается встроенный блок и мой результат должен быть таким:

Я использую Jquery для отображения в DIV, содержащий «Accueil» с функцией FadeIn и FADEOUT, но моя проблема заключается в следующем: Когда движение происходит над div, скрытый div анимируется и исчезает, как хотелось, но другой div (справа) движется вниз! Мой HTML выглядит следующим образом:

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> 

Мой 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; 
} 

И мои 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); 
     } 
     } 

     } 
); 
}); 

Второй ДИВ (он работает в обоих направлениях) движется вниз с специфичностью : верхняя часть движущегося div равна нижней части первого div (один для скрытого). У вас есть объяснение?

Fiddle: http://jsfiddle.net/Msh2T/1/ открытая большая правое окно, чтобы увидеть проблему;) ТНХ

Answer 1

Вы можете плавать в .bandeau дивы, так что они не влияют на поток макета рядного, эффективно ограничивая их возможности к родительским делам.

.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

Попробуйте использовать Z-индекс в вашем CSS, чтобы стек вашего дивы на верхней части друг друга

Answer 3

FadeIn и fadeOut установит элемент «display: none» после завершения анимации, удалив его из макета. Если вы не хотите, чтобы анимация влияла на макет, анимируйте непрозрачность.

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

Answer 4

Один из вариантов будет анимировать непрозрачность либо 1, либо 0, вместо того, чтобы использовать FadeIn и FADEOUT:

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

и

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

Вот этот пример: working fiddle.

Несколько других примечаний о коде ...

Во-первых, ваш парить в и функции парят-аут почти идентичны. Каждый раз, когда у вас такой код очень похож, очень хорошая идея объединить его в одну функцию.

Где у вас есть этот код:

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, чтобы проверить строку, как это, вы также можете использовать его, чтобы извлечь часть строки, которую вы хотите, не прибегая к хрупкому-to поддерживать .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); 
     } 
    ); 
}); 

Updated fiddle

(Вы можете заметить, что я противоречил мой первый совет здесь и не сочетать немного повторяющегося кода в парении -in и hover-out. Но теперь так мало кода, что дублирование не стоит беспокоиться.)