我的jquery插件atm存在这个问题，它与jquery mobile一起使用。我有一个动画功能，如下所示：
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);
}
});
},
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
});
}
}
正如您所看到的那样，当调用 animateWheel 时，它会获取第一个项目然后为其设置动画。 步骤功能可以动画其余项目（可能有数百个）。此动画仅发生一次。当动画完成时，它会调用 moveItem ，您可以看到将第一个项目移动到元素数组的末尾并再次调用 moveItem ，直到计数器为0。 这些都使用线性缓动使其看起来很光滑。
这一切都很好，可以在[url = http://www.r3plica.co.uk] Winner Select [/ url]查看但我的问题是我希望动画慢慢开始然后加速终于放慢脚步并停下来。 为了得到一个体面的想法，想象一下幸运之轮，这应该让你知道我追求的是什么。问题是，我不确定如何做到这一点。
我认为需要做的是改变速度，因为从低速开始调用函数（ moveItem ），然后加速并最终减速到停止。
我的HTML看起来像这样：
<div data-role="page" id="carouselPage">
<div data-role="header">
<img src="assets/css/images/logo.jpg" />
</div>
<div data-role="content">
<div id="carousel" class="carousel">
<div class="carousel-container">
<div class="carousel-item red">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item orange">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item green">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item navy">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item blue">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item teal">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item red">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item orange">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item green">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item navy">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item blue">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
<div class="carousel-item teal">
<div class="carousel-photo">
<img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
</div>
<div class="carousel-content ">
<p>Jaymie<br />Jeffrey</p>
<span class="twitter">
<p>@JaymieJeffrey</p>
</span>
</div>
</div>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
如果有人可以提供帮助，我将不胜感激：）
/ r3plica
更新1
我现在设法通过这样做来实现某种缓和：
animateWheel: function (self, speed) {
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 () {
var random = Math.random() * 5;
var duration = 1000 + Math.floor(1000 * random); // min: 1000, max: 6000
$({ speed: 0 }).animate({ speed: 100 }, {
duration: duration,
easing: 'easeInBack', // can be anything
step: function () { // called on every step
var $item = $(self.settings.itemClass).first();
$item.hide(Math.ceil(this.speed), "linear", function () {
$(this).appendTo(self.settings.itemContainerClass).show(this.speed, "linear");
});
}
});
}
});
}
答案 0 :(得分：0)