Javascript 带li元素的jqueryfadeout-fadein问题

我有以下无序列表：

<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>

这个效果正在发挥作用，但我有一个闪烁的效果，项目开始淡出，但有一刻列表的高度空间更大。fadein完成后，列表将返回到原始高度大小

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

提前谢谢。 亲切的问候。

---

Josema.

我觉得你的问题很简单。您正在创建一个列表，通常，这个列表会像这样列出您的项目

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

等等，假设上面的列表高度为3。现在，如果我淡出第1项和第2项，它们会淡出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);
    }
);

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

---

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

在我看来，您的问题非常简单。您正在创建一个列表，通常，这个列表会像这样列出您的项目

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

等等，假设上面的列表高度为3。现在，如果我淡出第1项和第2项，它们会淡出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);
    }
);

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

---

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

您的问题是淡入并不是等待淡出完成。在淡出完全消失之前，这将使列表与两者的总和一样大

假设想要的效果是完全淡出，那么你想要的是正确的淡入效果：

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

您可能还想考虑在UL上设置CSS MIN高度，以使它在页面其余部分上减少到0秒的影响最小化，或者如果您真的想发疯，可以通过设置当前高度的固定高度开始，淡出它的现有内容，使用动画将其设置为所需高度，然后在新列表中淡入。这将提供最平滑的过渡

---

（如果这不是你想要的，请澄清预期结果，我再给它一次机会=）

你的问题是你的淡入并不是等待淡出完成。在淡出完全消失之前，这将使列表与两者的总和一样大

假设想要的效果是完全淡出，那么你想要的是正确的淡入效果：

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

您可能还想考虑在UL上设置CSS MIN高度，以使它在页面其余部分上减少到0秒的影响最小化，或者如果您真的想发疯，可以通过设置当前高度的固定高度开始，淡出它的现有内容，使用动画将其设置为所需高度，然后在新列表中淡入。这将提供最平滑的过渡

（如果这不是你想要的，请澄清预期的结果，我将再次尝试=））