javascript - JQuery Animate 函数不改变左绝对位置

Question

第二次编辑:好的，所以我在这个问题上确实得到了一些帮助，但是当我现在将工作模型输入到我页面中的类结构时，它会中断并且找不到方法。我尝试缓存“this”以查看我的方法，但是我没有运气......

新的 JS fiddle :http://jsfiddle.net/goredefex/3QvP9/22/

此外，我知道 JS Fiddle 不适用于类，因为当我检查它时，我可以看到它自动添加了一个 $(function() {});加载事件不受我的控制。

新 JS 代码(所有其他代码完全相同):

$(function() {                              
    var m = new ImgMarquee("#box");
});

function ImgMarquee(container) {
    this.setUpImages(container);
    var total = this.findAndSetContWidth(container);

    //Make Second Hidden Stage
    var doppelganger = $(container).clone();                
    $(container).first().append(doppelganger.html()); //<-- Add In Stage

    this.animateMarquee(this.animateMarquee, container, total);

} //EOC

//Calculates Width & Sets Viewer
ImgMarquee.prototype.findAndSetContWidth = function(container) {
    //Set Parameters
    var imgs = $(container + " a img"),
        width = 0;
    //Calculate Width
    $(String(container)).find(imgs).each(function() {
        width += $(this).width();
    });
    //Set Container Width
    $(container).css({"width":String(width*2)});

    return width;

}; //end function

//Adjusts Height Of Images To Parent Container
ImgMarquee.prototype.setUpImages = function(container) {
    var imgs = $(container + " a img"), 
        gutter = 3;
    //Attach To All Given Images
    $(String(container)).find(imgs).each(function() {
        $(this).css({
            "max-height":String($(this).parent().parent().height())+"px",
            "padding-right":String(gutter)
        });
    });

}; //end function

//Adds JQuery Animation To Container
ImgMarquee.prototype.animateMarquee = function(recursion, c, t) {
    $(c).animate({'margin-left':String(-(t))}, 
        {
            easing:'linear',
            duration:50000,
            complete: function() {
                $(c).css({"margin-left":"0"});
                this.animateMarquee(this.animateMarquee, c, t);
            }
         }
    );
}; //end function

这是原始问题:还没有找到答案，我想知道我做错了什么。我有一个动画功能来制作一个愚蠢的图像选取框滚动条，我唯一做不到的部分是图像从 DOM 上的可见 x 轴上掉下来的部分 (x < 0px)并将自身移回到最右侧 x 轴顶部的行的前面。

换句话说，它会在幕后移动到隐藏的右侧，等待进入用户可以看到它的舞台。

我只想要一个简单的无限滚动条，它可以连续缓慢地显示我集中的所有图像。

第一次编辑 - 现在旧了: 根据要求添加了 JS-Fiddle [此处]:http://jsfiddle.net/goredefex/3QvP9/

这是我的代码....

HTML:

    <div id="backing">
        <div id="box">
            <img class="img" src="img/x.png" />
            <img class="img" src="img/y.png" />
            <img class="img" src="img/z.png" />
            <img class="img" src="img/1.png" />
            <img class="img" src="img/2.png" />
            <img class="img" src="img/3.png" />
            <img class="img" src="img/x.png" />
            <img class="img" src="img/y.png" />
            <img class="img" src="img/z.png" />
            <img class="img" src="img/1.png" />
            <img class="img" src="img/2.png" />
            <img class="img" src="img/3.png" />
        </div>
    </div>

    <button id="btn">GO!</button>

CSS:

        #backing{
            height: 55px;
            width: 800px;
            background-color: black;
            color: white;
            position: relative;
            overflow-x: hidden;
        }

        #box{
            height: 55px;
            width: 3000px;
            position: absolute;
        }

        #box img {
            float: left;
            opacity: .6;
        }

        #box img:hover {
            opacity: 1;
        }

JS:

    $(function() {                              
        $("#btn").on("click", function() {                  

                var total = setMarqueeAndSum(".img");                   

                //Animation
                launchMarquee(total, ".img");

            });
        });

        function setMarqueeAndSum(iClass) {
            //Keep Track of Positions
            var lPos = 0, 
                gutter = 3;
            //Attach To All Given Images
            $(String(iClass)).each(function() {
                $(this).css({
                    "max-height":String($(this).parent().height())+"px",
                    "position":"absolute", 
                    "top":"0px", 
                    "left":function() {
                        return lPos==0 ? "0px":String(lPos + gutter) + "px";
                    }
                });
                lPos = lPos + $(this).width() + gutter;
            });

            return lPos;

        } //end function

        function launchMarquee(t, iClass) {
            $(iClass).animate({left:'-='+String(t)+'px'}, 
                {
                    easing:'linear',
                    duration:40000,
                    step:function(now, fx) {
                        var cache = t;
                        if($(this).position().left<(0-$(this).width()))
                            $(this).css({"left":String(cache)+"px"});
                    },
                    complete: function() {launchMarquee(t);}
                 }
            );
        } //end function

Answer 1

做这些事情总是有很多种方法，但我首先想到的是:

1. 复制图像。
2. 中途为它们设置动画(它们只是为了产生无限幻觉)。
3. 通过设置适当的 css(margin-left:0)立即回滚动画。

4. 重复这些步骤。

   $(function() {                              
   $("#btn").on("click", function() {                  
   
       $(this).attr("disabled", "disabled"); // Disable the button after click
   
       var $box  = $("#box"),
           total = 0;
   
       // Make box width equal to imgs summed up (not wider than that)
       $box.find("img").each(function(){
           total += $(this).width();
       });
       $box.css("width", total);
       console.log("The '.box' width is ", total);
   
       setImgs($box); // Set css propertes of an image here
   
       var $box_copy = $box.clone(); // Copy the imgs...
       $("#box").first().append($box_copy.html()); // ... and append them (basically duplicate all images)
   
       animate(animate, $box, total);
   });
   
   function setImgs(parent) {
       parent.find("img").each(function()
       {
           $(this).css({ 
               "max-height": "50px",
           });
       });
   }
   
   function animate(callback, $box, total)
   {
       $box.animate({
           "margin-left" : -total / 2
       }, 10000, "linear", function(){
           $box.css("margin-left", "0"); // Roll back the animation instanly by setting margin to 0
           animate(animate, $box, total); // Then animate again...
       });
   }
   });
   

这是一个 fiddle :http://jsfiddle.net/3QvP9/16/

重要提示:不要同时为每个图像制作动画，只需为它们的容器制作动画。拯救地球，不要杀死浏览器。