jquery - かつて変数にあったコンテンツを appendTo() できません

Question

私は小さなギャラリープラグインに取り組んでいます。目標は、画像を含む一連の順序付けられていないリストを作成し、それらをクラス ギャラリーを持つ div にラップすることです。これがセットアップで、私のスクリプトは .gallery の内容を取得して変数に保存し、いくつかの新しい html 要素を .gallery に追加して、スタイリングとギャラリー スクリプトが引き継がれるようにします。

html を取得して再構築する方法は次のとおりです。

 var content = $("#gallery").html();

    $("#gallery").html("<div id='galleryInner'><div id='galleryTrack'>"+content+"</div>   
<div class='mask' id='leftMask'><div class='btn' id='lBtn'><img src='images/arrowL.png'> 
</div></div><div class='mask' id='rightMask'><div class='btn' id='rBtn'><img 
src='images/arrowR.png'></div></div></div></div>");

このように設定した後、私のスクリプトはこの html 構造のいくつかの側面を操作できますが、他の側面は失敗します。

例えば：

function moveLeft() {
   $('#galleryTrack ul:first-child').animate({
       width: 0,
     }, 250, function() {
   $("#galleryTrack ul:first-child").appendTo($("#galleryTrack"));
   $("#galleryTrack ul:last-child").css("width", w);
     });         
}

アニメーションは機能していますが、appendTo() と css() は機能していません。

それがすべて静的であれば問題なく動作します.javascriptでコンテンツを再作成した場合にのみ壊れます.

理由はありますか？

*編集***

ここに完全なコードがあります：

 $(document).ready(function() {
    var btn = 1;
    var count = 0;
    var w = $("#galleryTrack ul:first-child").width();
    var nh = 0;
    var h = 0;
    var timer = null;
    var msg = $("#msg");
    var content = $("#gallery").html();

    $("#gallery").html("<div id='galleryInner'><div id='galleryTrack'>"+content+"</div></div><div class='mask' id='leftMask'><div class='btn' id='lBtn' style='display: none;'><img src='images/arrowL.png'></div></div><div class='mask' id='rightMask'><div class='btn' id='rBtn' style='display: none;'><img src='images/arrowR.png'></div></div>");

   $('#rBtn').click(function(){
       clearTimeout(timer); 
       timer = setTimeout(moveLeft, 250);
   }); 

    $('#lBtn').click(function(){
      clearTimeout(timer); 
      timer = setTimeout(moveRight, 250);
    }); 

    $(document).keydown(function(e){
      if (e.keyCode == 39) { 
         clearTimeout(timer); 
         timer = setTimeout(moveLeft, 250);
      }
    });

    $(document).keydown(function(e){
      if (e.keyCode == 37) { 
        clearTimeout(timer); 
        timer = setTimeout(moveRight, 250);
      }
    });

    function moveLeft() {
        $('#galleryTrack ul:first-child').animate({
            width: 0,
        }, 250, function() {
            $("#galleryTrack ul:first-child").appendTo($("#galleryTrack"));
            $("#galleryTrack ul:last-child").css("width", w);
        });         
    }

    function moveRight() {
        $("#galleryTrack ul:last-child").css("width", "0");
        $("#galleryTrack ul:last-child").prependTo($("#galleryTrack"));
        $('#galleryTrack ul:first-child').animate({
            width: w,
        }, 250);
     }                                


     $("#gallery").mouseover(function(e) { 
         if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
              $("#lBtn").fadeIn(300);
              $("#rBtn").fadeOut(300);
         } else {
              $("#rBtn").fadeIn(300);
              $("#lBtn").fadeOut(300);     
         }
     });

     $("#gallery").hover(function() {
     }, function() {
         $(".btn").fadeOut(300);     
     });  

  });

編集...もう一度

わかりましたので、実際に問題があるのは関数 moveRight() のアニメーションのようです:

 function moveRight() {
             $("#galleryTrack ul:last-child").css("width", "0");
             $("#galleryTrack ul:last-child").prependTo($("#galleryTrack"));
             $('#galleryTrack ul:first-child').animate({
                  width: w,
             }, 250);
           }