1

我有以下无序列表：

<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 是变量名”和当前页面。

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

我用于淡出和淡入的行如下：

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

效果有效，但我有一个闪烁的效果，项目开始淡出，但有一段时间列表的高度空间更大。淡入完成后，列表返回到原始高度大小。

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

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

4

2 回答 2

1

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

  • 第 1 项
  • 第 2 项
  • 第 3 项

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

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

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

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

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

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

于 2009-11-25T12:26:11.310 回答
0

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

假设所需的效果是它完全淡出然后正确的淡入你之后：

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

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

（如果这不是你所追求的，请澄清预期的结果，我会再试一次=））

于 2009-11-25T12:27:43.243 回答