我的 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时，它会获取第一个项目，然后对其进行动画处理。step函数为其余项目设置动画（可能有数百个）。这个动画只发生一次。动画完成后，它调用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");
});
}
});
}
});
}