Jquery Fadeout fadein 与 li 元素问题

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>

我有一个计数器“实际页面是变量名称”，另一只手是当前页面。

使用 Jquery，当用户单击这两个按钮时，我尝试淡出和淡入 li 元素，具体取决于实际页面的计数器。

我用于淡出和淡入的线条如下：

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

效果正在工作，但我有闪烁效果，项目开始淡出，但暂时列表的高度空间更大。淡入完成后，列表将返回到原始高度大小。

可能是什么问题，或者我该如何解决它？

提前致谢。 亲切的问候。 何塞马.

Answer 1

在我看来，你的问题非常简单。您正在创建一个列表，通常，此列表会列出您的项目，例如

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

等，假设上面的列表的高度为 3。现在，如果我要淡出项目 1 和 2，它们会' d 淡出 500 毫秒，最终消失。此时，jquery 将显示从 block 更改为 none，导致浏览器从视图中删除该元素，并且列表的高度为 1。

现在，如果第 3 项一开始是不可见的，我有一个高度为2的列表，项目1和2开始淡出（它们还没有消失），我开始淡入项目3，jquery将项目3的显示更改为'block' 给我一个高度为 3 的列表，同时褪色（直到 1 和 2 完成褪色并被删除）。

您可以做的是在完成淡出后开始淡入，如下所示：

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

当淡出完成时，将调用作为第二个参数传递给 fad​​eOut 的函数。在淡出之后和淡入之前，您仍然可能会看到短暂的闪烁，在此期间列表的高度为零。

另一种方法是有两个单独的列表，使用绝对定位放置以占据网页上的相同空间，并同时淡出和淡入它们，但这需要更多的工作。

Answer 2

您的问题是您的淡入没有等待淡出完成。这使得列表与两者的总和一样大，直到淡出完全消失为止。

假设所需的效果是让它完全淡出，那么正确的淡入效果是您所追求的：

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

您可能还需要考虑在 ul 上设置 CSS 最小高度，以最大程度地减少其减少为 0 个元素的影响页面其余部分的一瞬间，或者如果您真的想发疯，您可以首先设置当前高度的固定高度，淡出其现有内容，使用 动画，然后淡入新列表。这将提供最平稳的过渡。

（如果这不是您想要的，请澄清预期结果，我会再试一次=））