元素“忽悠".并继续淡出/淡入 [英] Element "flickers" and Moves on fadeOut/fadeIn

问题描述

我正在使用以下代码在页面上fadeOut和fadeIn内容div( jsfiddle此处)...

I'm using the following code to fadeOut and fadeIn content divs on a page (jsfiddle here)...

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:

JavaScript:

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

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

在 jsfiddle 中进行了演示(至少在Windows 7的Firefox 9.0.1和IE 9中) )，当您在链接之间来回单击以显示/隐藏所讨论的元素时，当元素进行动画处理时，会出现整个页面范围的闪烁.基本上，div会向下移动到页面的最下方，这会导致滚动条出现，并将div稍微向左推，然后在动画结束时恢复正常.

As demonstrated in the jsfiddle (at least in Firefox 9.0.1 and IE 9 on Windows 7), when clicking back and forth between the links to show/hide the elements in question, there is a bit of a page-wide flicker as the elements animate. Basically, the div moves far down the page, which causes a scrollbar to appear and push the div a little to the left, then it returns to normal when the animation finishes.

无论如何都不是CSS方面的专家，我只是对此进行了一些修补，以尝试实现简单的淡入/淡入效果(自然而然地使用jQuery).因此，我想知道是否有更正确的方法来执行此操作，或者我在设计中犯了一些根本不为我所知的根本性错误.

Not being an expert in CSS by any means, I've just been sort of tinkering with this to try to achieve a simple fade-out/fade-in effect (using jQuery, naturally). So I'm wondering if there's a more correct way to do this or if I'm making some kind of fundamental mistake in my design that's just not known to me.

关于可能导致此闪烁的原因以及如何纠正它的任何想法?

Any ideas on what might be causing this flicker and how to correct it?

推荐答案

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

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

这篇关于元素“忽悠".并继续淡出/淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！