Question

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

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

Answer 1

我给孩子们制作了动画片，但发现它在一个连续的循环中猛拉了。在尝试使用边距之后，我重新访问了jquery网站和 animate 的定义我意识到animate的默认效果是“swing”，这就是导致我的抽搐的原因。所以，我修改了我的代码：

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

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

动画父div和移动孩子

1 个答案: