JQuery fadeIn в позиции: абсолютные причины z-index issue

Технически я использую fadeToggle(), но они кузены... в основном моя проблема в том, что у меня есть абсолютно позиционированный div, который я использую slideToggle(), но Z-индекс не устанавливается до анимации завершается. Результатом является то, что во время затухания текст в соседнем div (который имеет более низкое значение z-индекса, чем одно затухание) появляется "поверх" затухания в div с более высоким z-индексом.

Кто-нибудь знаком с этой причудой? Знаете ли вы об обходах?

РЕДАКТИРОВАТЬ. Позвольте мне уточнить: когда анимация ЗАВЕРШЕНО, z-index разрешается правильно, но во время перехода текст находится поверх нее.

Ответ 1

У меня была такая же проблема, поэтому я решил поделиться этим решением. Как вы сказали, jQuery делает что-то с fadeIn(), fadeOut(), slideToggle() и т.д., Когда элементы абсолютно позиционируются с помощью z-index, а элементы под ним также позиционируются как абсолютные и заданы z-index.

Если вы удалите нижние элементы, вы заметите, что ваша анимация работает нормально. Но с "подэлементами" вы получаете только ваш fadeIn, когда он полностью исчезает. Это потому, что z-index подтверждается только после завершения анимации.

Решение состоит в том, чтобы создать контейнер вокруг каждого элемента, который вы затухаете. Вы также можете создать контейнер вокруг всех элементов, но имейте в виду, что у вас не будет эффектов зависания или щелчка для подэлементов, контейнер div существует.

Итак, в моем примере я просто использую один div, который вы пытаетесь затухать. Так что скажем, у вас есть функция "увеличения", которая зарывается во время анимации:

<div id="zoomin"></div>

#zoomin {
  position:absolute; top:20px; right:20px; 
  display:block; z-index:15;
  width:47px; height:48px;
}

В настоящее время увеличение масштаба исчезнет. Таким образом, решение состоит в том, чтобы обернуть его в контейнер и применить в этом контейнере следующий css:

<!-- this is your container -->
<div id="zoomincontainer" class="keepontop">

  <!-- this is your div --> 
  <div id="zoomin"></div>

<!-- end container -->
</div>

#zoomincontainer {
  top:20px; right:20px;      
  with:47px; height:48px;
}

div.keepontop {
  position:absolute; z-index:14;
}

Это применит фундамент для вашего div и сохранит его поверх других слоев во время анимации.

Обратите внимание, что, поскольку ваш "zoomin" div установлен абсолютно, вам необходимо применить характеристики ширины, высоты и положения к вашему div "контейнеру" zoomincontainer ". В противном случае вы найдете свой контейнер div в верхнем левом углу страницы/фрейма с размерами 0px x 0px - это не будет основой для чего-либо, если только он не охватывает всю область под анимациями, которые вы анимации.

Я поместил PA и z-index в класс keepontop, если у вас было несколько div, которые вы затухали.

Теперь работает как шарм. Надеюсь, это поможет!

Ответ 2

Еще одно замечание... У меня была одна и та же проблема, и я решил:

<div class='keepontop'>
 <div class='overlay'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>

<script>
$('.overlay).fadeIn(500); 
$('.keepontop').css('position', 'relative'); 
</script>

.keepontop{
position:absolute;
z-index:999;
}

Это позволило мне иметь один containg div, который исправляет проблему z-index, но также решил проблему с событием click для похоронных DIV.

Ответ 3

У меня такая же проблема, и я пробовал все эти решения, и это не решило мою проблему...

Что я сделал для его решения, прежде чем вызвать эффект затухания, я уменьшил индекс z для элемента, который был впереди, даже с "нижним" z-индексом... Чем я называю выгорание с включенным полная функция, поэтому, когда мой эффект затухания заканчивается, и проблема z-index автоматически решается, я возвращаю z-индекс для элемента, который я сначала уменьшил.

<div class="concept">
    <div class="title">...</div>
</div>

<div class="content4>...</div>

<script>
    $('.concept .title').css('z-index', 0);

    $('.content4').fadeIn(600,function(){
       $('.concept .title').css('z-index', 1);
    });
</script>

// CSS

.concept { position: absolute; } 
.concept .title { position: absolute; z-index: 1; }

.content4 { position: absolute; z-index: 1000; }

Ответ 4

Slidetoggle действительно причудливый... У меня была аналогичная проблема. То, как я получил его для работы на моем веб-сайте, было просто переместить перегруженный div в самую нижнюю часть моего html. Поскольку он последний раз в DOM, индекс z должен автоматически устанавливаться выше, чем предыдущие элементы. Поскольку он абсолютно позиционирован, у вас также не должно быть проблем с макетом.

Ответ 5

Поместите div вокруг вашего переключающего div. Добавьте стиль с относительным положением и правильным z-индексом. (Может случиться, что z-index 1 недостаточно для вас, затем попробуйте с более высоким уровнем и т.д. 100)

<div style="position: relative; z-index: 1;>
  <div id="component-to-toggle">
    ...
  </div>
</div>

Таким образом, компонент переключения скроется, когда он предположится, но div вокруг никогда не будет, и он никогда не потеряет его z-index.