0

我有一个点击事件绑定了这个函数：

animateItem: function (container, distance, speed) {
    var double = "-" + distance;
    var currentMargin = parseInt($(container).css("margin-left"));

    if (double >= currentMargin) {               
        $(".carousel-item").first().hide(speed, function () {
            $(this).appendTo(container).show();
        });
    } else {
        $(container).animate({ "margin-left": "-=" + distance + "px" }, speed);
    }
}

这完美地工作。它停止为容器设置动画，而是将第一个元素移动到模仿动画的容器的末尾。

现在我想创建一个连续循环，我已经尝试过：

$(self.settings.itemContainerClass).animate({ "margin-left": "-=" + width * 50 + "px" }, {
    duration: 500 * 50,
    step: function (now, fx) {
        if (width >= now) {
            $(self.settings.itemClass).first().appendTo(self.settings.itemContainerClass);
        }
    }
});

但这只是行不通。谁能给我一些我可以尝试的见解？

干杯，/r3plica

4

1 回答 1

0

我正在为孩子们制作动画，但发现在连续循环中它会猛拉。在尝试使用边距后，我重新访问了 jquery 站点和 animate 的定义，我意识到 animate 的默认效果是“摇摆”，这就是导致我抽搐的原因。因此，我将代码修改为：

animateItem: function (self, speed) {
    var $item = $(self.settings.itemClass).first();
    var width = $item.outerWidth(true);
    var left = parseInt($item.css("left"));

    if (left < 0) {
        self.moveItem(self, speed, 1);
    } else {
        $item.animate({ "left": "-" + width + "px" }, {
            duration: speed,
            easing: "linear",
            step: function (now, fx) {
                $(self.settings.itemClass + ":gt(0)").css("left", now);
            }
        });
    }
},
moveItem: function (self, speed, count) {
    if (count > 0) {
        var $item = $(self.settings.itemClass).first();
        $item.hide(speed, "linear", function () {
            $(this).appendTo(self.settings.itemContainerClass).show(speed, "linear");
            self.moveItem(self, speed, count - 1); // Repeat
        });
    }
},

这只是为单个对象设置动画，以了解对象的外观，这里有一些 html :)

<div id="carousel" class="carousel">
    <div class="carousel-container">
        <div class="carousel-item yellow">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Hicks, Bill</p>
        </div>
        <div class="carousel-item green">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Jeremy, Ron</p>
        </div>
        <div class="carousel-item blue">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Little, John</p>
        </div>
        <div class="carousel-item violet">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Smith, Will</p>
        </div>
        <div class="carousel-item purple">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Shakespear, William</p>
        </div>
        <div class="carousel-item pink">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Jameson, Jenny</p>
        </div>
    </div>
</div>

为了不断地制作动画，我创建了这个函数：

animateWheel: function (self, speed, count) {
    var $item = $(self.settings.itemClass).first();
    var width = $item.outerWidth(true);

    $item.animate({ "left": "-" + width + "px" }, {
        duration: speed,
        easing: "linear",
        step: function (now, fx) {
            $(self.settings.itemClass + ":gt(0)").css("left", now);
        },
        complete: function () {
            self.moveItem(self, speed, count);
        }
    });
},

我的选项如下所示：

defaults = {
    itemsPerPage: 4.5,
    itemContainerClass: '.carousel-container',
    itemClass: '.carousel-item',
    startButton: '#start',
    carouselPage: '#carouselPage',
    contentElement: '.ui-content'
};

希望这会让其他有同样问题的人知道该怎么做:) 我的下一个阶段是在动画停止之前尝试减慢动画（对于连续循环）

于 2013-09-20T08:36:34.020 回答