Jquery淡出淡入李元素的问题

Question

我有以下的未清单：

<ul id="#lastcompanieslist">
<li style="display: none;" page="0">whatever 1</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 3</li>
<li style="display: none;" page="0">whatever 4</li>
<li style="display: none;" page="1">whatever 5</li>
<li style="display: none;" page="1">whatever 6</li>
<li style="display: none;" page="1">whatever 7</li>
<li style="display: none;" page="1">whatever 8</li>
</ul>
<p class="NextPrevious">
<img src="/Images/PreviousItem.jpg" id="previousbutton" /> 
<img src="/Images/NextItem.jpg" id="nextbutton" />
</p>

我有一个计数器"actualpage的变量名称为"与目前的页面为其他手。

有文化的地方我试图淡出和淡入李件时的用户击这两个按钮和根据不同的反的实际页。

行，用于淡出和淡入如下：

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500);
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);

效果是工作，但是我有一个闪烁效应，本项目开始淡出，但对于目前清单较大的高度空间。当淡入是完整的，清单返回原来的高度的大小。

可能是什么问题，或者我怎么解决呢？

在此先感谢。种问候。Josema.

Answer 1

在我看来，你的问题是非常简单。你创建的一个列表中，通常情况下，这个列表中的项目这样的

• 项目1
• 项目2
• 项目3

等等，让我们说名单上面要有一个高度3。现在，如果我是淡出项目1和2中，他们会渐出为500毫秒，并最终以无形的。在这一点上jquery变化的显示从 block 要 none, ，使浏览器以删除的元素，并且您的名单有一个高度1。

现在，如果项目3看不见在一开始，我就会有一个列表的身高2，项目1和2开始褪色了(他们不走了呢)，并且我开始消失在项目3。变化，显示的项目3为'块'给我一个列表3的高度，而衰落的(直到1和2的成的衰落，并删除了)。

什么你能做的就是开始你的淡出之后你完成你的淡出，这样的：

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500,
    function() {
       $('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);
    }
);

功能是通过作为第二个参数淡出将被称为当衰落是完整的。你仍然能看到一个简短的闪烁之后淡出之前的淡入，在这期间，该名单将有一个高度为零。

一种不同的方法将有两个单独列表，放置使用的绝对位占据同样的空间网页上，并淡出来，并在同时进行，但是这一点更多的工作。

Answer 2

您的问题是，你的淡入不是等着你淡出到结束。这是使该列表大如两个组合直到淡出是完全消失为止。

假设期望的效果是，它淡出完全然后正确作出淡入你后：

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500, function() {
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500); });

您可能还需要考虑设置你的UL一个CSS最小高度，以尽量减少它的影响被降低到0元素在页面的其余部分的一瞬间，或者如果你真的要发疯，你可以通过设置它的一个固定的高度开始的当前高度，淡出它的现有内容，使用它有生到所需高度动画然后淡入新的列表。这将使最平滑的过渡。

（如果不是你以后有什么，明确预期的结果，我给它一个镜头=））