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);
           }

无法appendTo（）曾经在变量中的内容

0 个答案: