ここでは少し初心者です。少し誤動作しているアニメーションがあります。これはキューイングの問題だと思いますが、ホバー/一時停止効果が必要なだけで、読んだところ、このソリューションの間違った道を進んでいると感じています。
私がキューを理解する方法は、一連の小さなアニメーションを処理して異なる時間にトリガーし、より大きな効果を実現することです。私はこれについて大量の読書をしてきましたが、これは私が達成しようとしていることに対する間違った解決策だと感じています. 私の研究では、ホバーオーバー/アニメーションアップしてから、ホバーオフ/アニメーションダウンします。アニメーションを再開したいだけなので、これについても間違った道を進んでいると感じています。ネイティブ ソリューションを見つけるのに非常に苦労していますが、さまざまなプラグインがあることを認識しています。
どこに行ったかを示すためにコメントを残しました。これらを取り除きたい場合は、次回のためにお知らせしますので、お知らせください。
私が達成したいこと：ホバリング、スライドショーの停止、ホバリングアウト、スライドショーの再開。
私の問題：マウスオーバー/アウトを繰り返すと、アニメーションがかなり遅くなります。
私が試したことは、限定的またはまったく成功しませんでした:
- キューをクリアして結果をコンソールに出力しても、まだ遅くなります。
- 左の位置の値を現在の左の値に設定すると、うまくいきません。
- スライドショーの下にあるキュー カウンターは正確である必要があります。
JS Fiddle Found Here : http://jsfiddle.net/qWQCQ/
JS Fiddle with stop values here : http://jsfiddle.net/qWQCQ/1/
以下のコードサンプル:
Javascript :
$("document").ready(function(){
//----------------------------------------CONFIG--------------------------------------------------------------
var resetNum = 0;//FOR RESET PURPOSE
var itemRightMargin = 10;//YOUR MARGIN VALUE
var itemWidth = 100;//WIDTH OF YOUR IMAGES, NOT INCLUDING M/P
//----------------------------------------END CONFIG----------------------------------------------------------
$('.w-slides .first').clone().appendTo('.w-slides').removeClass('first').addClass('last');
var clipWidth = (itemRightMargin+itemWidth)*$('.w-slides li').length;
var containerWidth = clipWidth-itemRightMargin;
var clipCapacity = $('.w-slides li').length;
var animation = (containerWidth*-1)+itemWidth;
//SET THE STRUCTURE
$('.w-slideshow').css('width', itemWidth);
$('.w-multi').css('width', containerWidth);
$('.w-slides').css('width', clipWidth);
$('.w-slides li').css({'float':'left', 'width':itemWidth, 'margin-right':itemRightMargin+'px'});
$('.w-slides li:last').css('margin-right', 0);
$('.w-slideshow, .w-multi').css({'padding':resetNum});
$('.w-multi').css({'margin':resetNum});
function animateMe(){
$('.w-multi').animate({left:animation}, 6000, 'linear', function()
{
$('.w-multi').css('left', 0);
animateMe();
});
}
$('.w-multi').hover(function(){
$(this).stop(false, false);
//$(this).stop().animate({left:animation}, 6000, 'linear');
//var thisPosition = $(this).css('left');
//alert(thisPosition);
//$(this).css('left',thisPosition);
var queueNum = $('.w-multi').queue('fx').length;
//(function(){console.log($(this).queue('fx').length);});
$('#queue').html(queueNum);
//$(this).queue(function(){console.log($(this).queue('fx').length);});
},
function(){
animateMe();
});
animateMe();
});
HTML :
<div>
<div class="w-slideshow">
<div class="w-multi">
<ul class="w-slides">
<li class="first"><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-1.jpg" /></a></li>
<li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-2.jpg" /></a></li>
<li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-3.jpg" /></a></li>
<li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-4.jpg" /></a></li>
<li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-5.jpg" /></a></li>
</ul>
</div>
</div>
<div id="queue" style="width:150px; margin:0 auto; margin-top:20px;">Num of items in queue = </div>
</div>
