2012-05-02 14 views
2

divのコンテナをウィンドウとして使用して、jqueryを使用して水平liアイテムのリストをスライド表示します。jqueryを使用してdivの項目の動的リストを水平方向にスライドさせる方法

これは私がこれまで持っているものです。 http://jsfiddle.net/TX5fJ/5/

それは、8つの項目のリストを初期化して、左と右のdivのウィンドウ内でそれらをスクロールすることができます。また、リストの最後に項目を追加し、リストの先頭から項目を削除する機能も備えています。私がやろうとしています何

:見えない

1)は、リストの末尾にアイテムを追加します(アイテム)

2)にリストをスクロール項目がちょうど見え追加するために、左(最初の項目がビューの外に移動)

3)リストの先頭から項目を削除(もはや必要)

問題は、最初のアイテムを削除して左にシフトするリスト全体を引き起こすことです。

最初の項目を削除しないと、正常に機能しているようです。 (私のテスト機能を参照してください)

私の懸念事項は、ulはすべての潜在的なアイテムを保持するのに十分な幅がなければならないということです。私はそれを固定幅を与えていない場合は動作しません。

私は99999px幅にすることができ、テストボタンで現在の方法を使用すると思います。

誰でも優れた実装についてアイデアを持っていますか?

ありがとうございました。あなたが頭からリスト項目を削除した後

答えて

3

あなたは、単にあなたのリストのマージン-leftプロパティをリセットすることができます:

function RemoveItem() { 
    $('#slider-items li').first().remove(); 
    $('#slider-items').css('marginLeft', 0); 
} 

fiddleを更新しました。

+0

アニメーションが完了した後、それを追加していただきありがとうございます。 –

関連する問題