ある div から次の div に自動間隔でフェードするスライダー機能を開発するのは楽しいプロジェクトだと思いました。できます！しかし、何らかの理由で、最初のスライドに戻るとフェード アニメーションが機能しなくなりますが、次のスライド以降に進むと機能を再開します。アニメーションが失敗するのは、最後のスライドから最初のスライドに切り替える場合のみです。インデックスを除いて、進行と再起動のコードはどちらも本質的に同じであるため、私には意味がありません。
z-index を試したり、非表示/表示を FadeTo と組み合わせて使用したり、3 つすべての組み合わせを試したりしました。問題をなめているようには見えません。
何が問題なのかを確認するために、コンソールに出力するコードを追加しましたが、問題はありません。それは微妙だが重要なことだと確信しています - しかし、それは私を逃れ続けています. したがって、どんな洞察も確かに高く評価されます！
コードと実際の例は、http: //jsfiddle.net/cawwM/で確認できます。
これは、スライドの切り替えを行う関数です。
function toggleSlides(slideArray) {
var currentSlideIndex = 0;
var slideLength = slideArray.length;
window.console&&console.log('Slide Toggle interval fired. \n');
window.console&&console.log('Searching for current slide... \n');
$.each(slideArray,function(index, value){
if($('#'+value).hasClass('currentSlide') === true) {
currentSlideIndex = index;
window.console&&console.log('Current slide identified. \n');
return (false); // break loop, we have index.
}
});
if(currentSlideIndex < slideLength - 1) {
// Advance to next slide
window.console&&console.log('Still more slides ('+currentSlideIndex+' < '+(slideLength - 1)+'). Advancing to next slide now. \n');
$('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
$('#'+slideArray[currentSlideIndex+1]).addClass('currentSlide');
$('element').css('z-index', 9999);
$('#'+slideArray[currentSlideIndex+1]).show().fadeTo('slow', 1, function() {
$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
}).css('z-index', 5);
} else {
// Go back to the first slide
window.console&&console.log('No further slides, going back to first slide now. \n');
$('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
$('#'+slideArray[0]).addClass('currentSlide');
$('#'+slideArray[0]).show().fadeTo('slow', 1, function() {
$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
}).css('z-index', 5);
}
window.console&&console.log('Done with slide toggling. \n');
}
繰り返しになりますが、フィードバックは常に歓迎されます。コードを改善する方法を見つけた場合は、それも歓迎します。私は常に、より良い方法を学ぶことでスキルを向上させたいと思っています。