これはあなたの中にはシンプルなものなので、私を助けてください! 私は3つのパネル(divs)を持っています。 1つのパネルをスライドさせるのは簡単ですが、複数のdivを順番にスライドさせる方法はありますか?おかげさまで jQuery:1つ後ろのスライドパネル
答えて
あなたは「匿名関数」とJavaScript言語のarguments.calleeの機能を知っていない場合、私は本当にKane's solutionのように、あなたは理解することは少し難しいかもしれないにもかかわらず、 。
後も動作します:
$('#slideDiv').click(
function(e)
{
e.preventDefault();
var i = -1;
var divList = $(".slide");
var animationCallback = function()
{
if(++i < divList.length)
$(divList[i]).slideUp('slow', animationCallback);
//Replace 'slideUp' with any other animation of your choice. Make sure to pass 'animationCallback' as the last parameter.
//e.g. you can do
//$(divList[i]).animate({ left : '300px'}, 100, 'linear', animationCallback);
};
animationCallback();
}
);
EDIT:
更新デモページ。別のアニメーションを使用する方法についてのコメントを追加しました。
皆さんは素晴らしいです。 30分、すでに何が行われているかを見てください! Anyhoo、あなたは正しいですが、私は匿名関数などを理解していません。しかし、あなたのコードを見ると、リストの長さによって次のdivのアニメーションを開始するタイミングが決まると思いますか? divを右から左に横方向にスライドさせたい場合はどうすればよいですか? – lnvrt
リストの長さによって、別のアニメーションをシーケンスする必要があるかどうかが決まります。例えば。上記のコードは、 'slide'クラスで4番目のdivを追加すると機能します。 3番目のアニメーションが終了した後、4番目のdivをアニメートします。別のアニメーションが必要な場合は、関連する方法で 'slideUp'メソッドを変更してください。方法を示すコードを編集してみましょう。 – SolutionYogi
http://jsbin.com/adaca/editにCSSを少し追加しました。//少し明確になりました... – lnvrt
3つのdivのクラスに ".slide_panel"を渡します。これにより、それらをループしてアニメーションを実行します。
$("#button").click(function()
{
var i = -1;
var arr = $(".slide_panel");
(function(){
if(arr[++i])
$(arr[i]).animate({ left: "300px" }, 100, "linear", arguments.callee)
})();
});
+100、arguments.calleeの優れた使用!ここに作業デモページがあります。 http://jsbin.com/utebe私はこれがDIVをどのように構造化すべきかを著者が理解するのに役立つと思った。 – SolutionYogi
デモページへのリンクを追加するためにあなたの投稿を編集しました。 – SolutionYogi
私はif条件を少し違って書きます。 if(++ i
- 1. シャッフルアレイ1つ後ろ
- 2. JQueryプラグイン:エキスパンドボックス/スライドパネル
- 3. Jquery Imageスライドパネル上のマウス
- 4. jQuery show hide左からスライドパネル
- 5. jqueryを使用したスライドパネル
- 6. jquery image div内のカーソルの後ろ
- 7. マウスの後ろにあるJqueryのツールチップ
- 8. asp.netのオートコンプリートjquery、ソースコードの後ろ
- 9. 複数のスライドパネル
- 10. アレイから1つのアイテムを削除し、他のアイテムを後ろに移動
- 11. Divの後ろ
- 12. アンドロイドアプリの側面スライドパネル
- 13. Wicketスライドパネル/ div/x
- 14. Androidマーキー後ろ
- 15. O(1)のテンプレートパラメータパックの後ろにアクセスする
- 16. Google Chromeのオプションのスライドパネル
- 17. JSF PhaseListener viewIdは常に1の後ろにあります。
- 18. WPFでのダイナミックコントロールとスライドパネル/ロールアウト
- 19. ワードプレスのテーマイメージフッタの後ろ
- 20. コードの後ろのユーザーコントロール
- 21. セッションの後ろの話
- 22. divの後ろにJquery datepickerがあります
- 23. Drupal 7プロキシの後ろ
- 24. プロットラインの後ろにバープロット
- 25. javascriptスライダーの後ろにドロップダウンメニュー
- 26. UIViewControllerナビゲーションバーの後ろにレンダリング
- 27. モバイルでdivの後ろに
- 28. コンテナがアプリのヘッダーの後ろにつまっている(Android)
- 29. 1つのコードの後ろに1つしかないASCXファイルを2つ(またはそれ以上)作成することはできますか?
- 30. jQueryツール:1つのAJAXタブ
実際の例を示すには、いくつかのコードが必要です。 – Sneakyness