どうしてもわかりません カルーセル

質問

$(function(){
$("#s2").click(function(){
$("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))-300+"px"},"slow","swing",
function(){
$("ul.s5:first").appendTo("#s4");
$("#s4").css("marginLeft","0px");
});
});
$("#s6").click(function(){
$("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing",
function(){
$("ul.s5:lest").appendTo("#s4");
$("#s4").css("marginLeft","-300px");
});
});

});

左まわり？はできるんですが、逆方向がどうしてもできません。

animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing",

のぶぶんが実はよくわかってません。

+200+"px"の部分は回転させる方向なわけですが
だとすると、ある特定の位置までいったらappendなりprependがかかって
画像がお尻？につくという事なわけですが
逆方向はそうはならない。なぜなんだろうと納得できないわけです。

すいません。お願いします

回答No.1

fujillin · ベストアンサー

ご使用のライブラリの種類やHTNMLの構造が不明なので、まったくわかりませんが、当たるも八卦のエスパー推測で・・・

＞のぶぶんが実はよくわかってません。
全体の仕組みをきちんと理解しましょう。（と言いながら、勝手な推測ですが。）
styleのmarginを変えることで要素を移動させてスライドしていると推測されます。300や200は移動量で現在の位置から相対的に計算しているのではないですか？
-300は左へ+200は右へとなると思いますが、なぜ絶対値が違うのかは質問者様にしかわかりません。
いずれにしろコールバックで最終的にmarginの値を調整していますので、現在位置からの指定をする必要もないように思えますが…

想像では、コードの前半は動作するけれど、後半部分が動作しないということでしょうか？

後半のコールバックで最後の子要素を先頭に移動し、leftの値を初期値に戻しているつもり思いますが、まずセレクタの:lestが違っていると思われます。また、appendTo()では最後に追加されるので結局なにもしません。先頭に移動する必要があるのではないでしょうか？
さらに、処理の順序を逆にしないと（移動させてからスライド）、スライド中は空白が見えていて、スライド終了時に要素が表示されることになると推測されます。

ざっと見ただけですが、アニメ処理の終了前にイベントが複数回発生した場合はどうなるんだろうか？
（キューに溜めておいてくれる方式なら良いですが、そのまま処理される場合は計算位置がずれそう…）

いちいち、要素を移動しないで最初に要素を一つ複製・追加しておいて、スライドのための値（例ではmargin)が常に一定範囲内にあるように制御しておくという方法もあると思います。
こちらのほうが、手順を気にする必要がありませんし、位置も単純にmodをとるだけですみますので、簡単といえば簡単かと。

まぁ、当たるも八卦なので、読み飛ばしてください。

補足

:lestが違っていると思われます。

このご指摘でばっちりできました。
後は位置の問題です。

一番よくわからないのが

margin:paseIntというの部分です。
のちにpxというのがでてきます。
paseIntは私の認識だと、文字つまり””の部分を数字として
とらえ時には計算をできるというのが認識です。

このプログラムの認識は私から見るとpxを
cssでいうところのpxという単位にする為にしているのでしょうか？

mariginLeftを二度しているところからすると・・

ほかの人のプログラムを参考にしてやってますので
よく解らないのです。