javascript - 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，它们会淡出 500 毫秒，并最终不可见。此时，jquery 将显示从 block 更改为 none，导致浏览器从 View 中删除该元素，并且列表的高度为 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 的函数。在淡出之后和淡入之前，您仍然可能会看到短暂的闪烁，在此期间列表的高度为零。

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