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>

一方、現在のページの「実際のページは変数名です」というカウンターがあります。

Jquery imを使用すると、ユーザーがこの2つのボタンをクリックしたときに、実際のページのカウンターに応じて、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 の 2 番目のパラメーターとして渡される関数が呼び出されます。フェードアウトの後とフェードインの前に、まだ短いちらつきが見られるでしょう。その間、リストの高さはゼロになります。

別のアプローチとして、絶対配置を使用して配置された 2 つの個別のリストを Web ページの同じスペースに配置し、それらを同時にフェードアウトおよびフェードインする方法がありますが、それにはもう少し手間がかかります。

于 2009-11-25T12:26:11.310 に答える
0

問題は、フェードインがフェードアウトの終了を待っていないことです。これにより、フェードアウトが完全になくなるまで、リストは両方を合わせたものと同じくらい大きくなります。

望ましい効果が完全にフェードアウトすることであると仮定すると、正しいフェードインは次のとおりです。

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

また、ul に CSS の min-height を設定して、ページの残りの部分で一瞬 0 要素に削減される影響を最小限に抑えることを検討することもできます。現在の高さの固定高さ、既存のコンテンツのフェードアウト、 Animateを使用して目的の高さにアニメーション化してから、新しいリストにフェードインします。これにより、移行が最もスムーズになります。

（それがあなたの求めているものでない場合は、意図した結果を明確にしてください。もう一度試してみます=））

于 2009-11-25T12:27:43.243 に答える