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>

我有一個計數器“ actualpage是變量名”，另一只手是當前頁面。

使用Jquery im嘗試在用戶單擊這兩個按鈕時（取決於實際頁面的計數器）淡出和淡入li元素。

im用於淡出和淡入的行如下：

$('#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 ，導致瀏覽器從視圖中刪除該元素，並且列表的高度為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之前，您仍然可能會看到短暫的閃爍，在此期間列表的高度為零。

一種不同的方法是使用絕對位置放置兩個單獨的列表，以占據網頁上的相同空間，然后同時淡入和淡出它們，但這需要更多的工作。

Answer 2

您的問題是淡入不等待淡出完成。 這將使列表與合並后的列表一樣大，直到淡出完全消失為止。

假設所需的效果是讓它完全淡出，然后是正確的淡入淡出：

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

您可能還需要考慮在ul上設置CSS最小高度，以最大程度地減少將CSS最小高度減少到0個元素，從而對頁面其余部分的影響，或者如果您真的想發瘋，則可以通過設置將其固定為當前高度的固定高度，淡出現有內容，然后使用“ 動畫”將其動畫化為所需的高度，然后淡入新列表。 這將提供最平穩的過渡。

（如果這不是您想要的，請澄清預期的結果，我再給它一個鏡頭=））