2009-09-01 12 views
2

こんにちは。私は少し問題があります。私は一連の事前入力されたリスト項目を持つ順序付きリストを持っています。私はjQueryを使って動的に別のリスト項目を追加し、ダウン要素をスライドさせるとjQuery slideDownは最後に挿入されたリスト項目の数を消去しますか?

<ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ol> 

することは、それはアイテムではなく番号が表示されます。このようなものになる:jQueryのは、これを行うに

1. Item 1 
2. Item 2 
3. Item 3 
4. Item 4 
Item 5 

です:

$("ol").append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
l.hide().slideDown(1000); 

任意のアイデア?

答えて

0

残念ながら、これを達成するための簡単で洗練された方法はありません。もう少し微調整した後、私は十分かもしれない別の解決策を思い付いた:

var ol = $("ol"); 
ol.append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
var h = ol.height(); 
l.hide(); 


ol.animate({ 
    height: h 
}, 1000, function() { 
    l.fadeIn(1000); 
}); 

は、アイテムを追加し、新たな高さを取得し、新しいリスト項目を非表示にし、新しい高さにアニメーション化し、新しいリストをフェードイン項目。ちょっとハッキリに見えますが、同様に機能するようです。たぶん、これは少しここにアニメーションと船外に行っている。

1

slideDownは、完了するとリスト項目の表示をblockに変更します。これは高さと幅のアニメーションが機能するために必要です。

$("ol").append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
l.hide().slideDown(1000, function() { $(this).css("display",""); }); 

をしかし、それはアニメーションの最後まで待つので、これは理想的な未満思わ:

あなたはこれを行うことによって、それを修正することができます。

+0

もちろん、*ブロック*はリストの表示方法を破壊します。 – jeef3

0

許容範囲内であれば、fadeInが有効です。私はテーブル/テーブル行と同じ種類の問題に遭遇しました。アニメーションはテーブル(そして明らかに順序付けされたリスト)上でうんざりすることがありますが、フェード関数はうまくいくようです。

関連する問題