jquery モバイルと一緒に使用される jquery プラグイン atm でこの問題が発生します。次のようなアニメーション関数があります。
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が呼び出され、最初の項目が要素の配列の末尾に移動され、カウンターが 0 になるまでmoveItemが再度呼び出されます。これらはすべて線形イージングを使用して滑らかに見えます。
これはすべて正常に動作し、[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");
});
}
});
}
});
}