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是变量名称”，其他手的当前页面。

当用户点击这两个按钮并依赖于实际页面的计数器时，Jquery尝试淡出和淡化li元素。

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

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

效果正常，但即时效果有闪烁效果，项目开始淡出，但有时候列表的高度空间会更大。当fadein完成后，列表将返回原始高度尺寸。

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

提前致谢。亲切的问候。 Josema。

Answer 1

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

第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);
    }
);

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

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

Answer 2

你的问题是你的淡出不是等待你的淡出完成。这使得列表尽可能大，直到淡出完全消失为止。

假设所需的效果是它完全消失，那么正确的效果会在你之后消失：

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

您可能还需要考虑在ul上设置CSS min-height，以最大限度地减少在页面其余部分将其缩小为0个元素的影响，或者如果您真的想要坚持下去，那么首先设置其当前高度的固定高度，淡出其现有内容，使用Animate将其设置为所需高度，然后淡入新列表。这将带来最顺利的过渡。

（如果那不是你想要的，澄清预期的结果，我会给它另一个镜头=））

Jquery Fadeout fadein与li元素问题

2 个答案: