0

我正在开发小型画廊插件。目标是让一个人创建一系列包含图像的无序列表，并将它们包装在具有类库的 div 中。这将是设置，我的脚本将获取 .gallery 的内容并将它们存储在一个变量中，向 .gallery 添加一些新的 html 元素，然后让我的样式和图库脚本接管。

以下是我获取和重组 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);
           }
4

0 回答 0