Элемент "мерцает" и перемещается на fadeOut / fadeIn

Question

Я использую следующий код для fadeOut и fadeIn div содержимого на странице ( jsfiddle здесь ) ...

HTML:

<ul>
  <li><a id="indexNav" href="index.html">Home</a></li>
  <li><a id="aboutNav" href="about.html">About</a></li>
</ul>

<div id="indexContent">
  This is the main page content.
</div>

<div id="aboutContent">
  This is the about page content.
</div>

CSS:

ul {
  float: left;
  display: block;
  margin-top: 50px;
  margin-left: 0px;
}

ul li {
  list-style: none;
  display: block;
  margin-top: 5px;
}

ul li a {
  display: block;
  height: 20px;
  width: 50px;
  margin: 0px;
  background: #7d5900;
  color: white;
  text-decoration: none;
  text-align: center;
}

div {
  width: 300px;
  height: 200px;
  margin: auto;
  margin-top: 70px;
  color: white;
  background-color: rgba(0, 36, 125, 0.5);
}

#aboutContent {
  display: none;
}

JavaScript:

$('#indexNav').click(function() {
  $('#aboutContent').fadeOut('fast');
  $('#indexContent').fadeIn('fast');
  return false;
});

$('#aboutNav').click(function() {
  $('#indexContent').fadeOut('fast');
  $('#aboutContent').fadeIn('fast');
  return false;
});

Как продемонстрировано в jsfiddle (по крайней мере, в Firefox 9.0.1 и IE 9 в Windows 7), при переходе между ссылками вперед и назад, чтобы показать / скрыть рассматриваемые элементы, при анимации элементов возникает небольшое мерцание по всей странице.По сути, div перемещается далеко вниз по странице, в результате чего появляется полоса прокрутки и нажимает div немного влево, а затем возвращается к нормальному состоянию после завершения анимации.

Не будучи экспертомв CSS, в любом случае, я просто пытался добиться простого эффекта постепенного исчезновения / постепенного появления (естественно, с использованием jQuery).Поэтому мне интересно, есть ли более правильный способ сделать это или я делаю какую-то фундаментальную ошибку в своем дизайне, которая мне просто не известна.

Любые идеи о том, что может вызывать это мерцаниеи как это исправить?

Answer 1

Это происходит потому, что ваши элементы отображаются относительно.Это означает, что когда оба присутствуют на экране, они перемещают друг друга.Когда вы делаете перекрестное затухание, что, по сути, и делает, они какое-то время будут отображаться на экране.Вам необходимо расположить элементы абсолютно одинаково.

#aboutContent, #indexContent {
    position: absolute;
    top: 10px;
    left: 50px;
}

Пример: http://jsfiddle.net/2TDj5/

Вы можете поместить элементы в div-обертку, что позволит вам расположить ихотносительно страницы, но абсолютно по отношению друг к другу.Просто убедитесь, что вы явно установили упаковщик на display: relative.

Пример: http://jsfiddle.net/2TDj5/1/

Answer 2

$('#indexNav').click(function() {
    $('#aboutContent').fadeOut('fast',function(){
        $('#indexContent').fadeIn('fast');
    });
    return false;
});

$('#aboutNav').click(function() {
    $('#indexContent').fadeOut('fast',function(){
        $('#aboutContent').fadeIn('fast');
    });
    return false;
});

Answer 3

Я думаю, что простой

.delay( 1 ).fadeIn(...)

должно помочь